隐藏父div并替换另一个div中的文本

Question

我已经制作了自定义选择菜单

    <span class="depend">
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--one">
            <a href="javascript:void(0);">Select 1</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--two">
            <a href="javascript:void(0);">Select 2</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value"  data-select-dropdown=".finder-form--three">
            <a href="javascript:void(0);">Select 3</a>
        </div>
     </span>

这是下拉列表

<div class="row finder-form__dropdown finder-form--one hide">
    <div class="col-xs-12">
        <div class="row finder-form__dropdown-list">
            <a href="">bla bla 1</a>
            .....
        </div>      
    </div>
</div>
<div class="row finder-form__dropdown finder-form--two hide">
    <div class="col-xs-12">
        <div class="row finder-form__dropdown-list">
            <a href="">bla bla 2</a>
            ....
        </div>      
    </div>
</div>
<div class="row finder-form__dropdown finder-form--three hide">
    <div class="col-xs-12">
        <div class="row finder-form__dropdown-list">
            <a href="">bla bla 3</a>
            ....
        </div>      
    </div>
</div>

我的jQuery目前看起来像这样

$("div.finder-form__dropdown-list a")
.on("click", function(e){
    e.preventDefault();

    //hide current div and unhide next matched div
    $(".finder-form__dropdown")
    .addClass("hide")
    .next()
    .toggleClass("hide");

    //replace text in select div
    $(".finder-form__input-value a")
    .text($(this).text()); 
});

点击<div class="finder-form__dropdown">时，我试图让点击的href的父href隐藏起来。然后href的文字将替换Select 1

中的文字

bla bla 1将文字替换为select 1，bla bla 2将文字替换为select 2，依此类推。

同样取消隐藏下一个<div>课程finder-form__dropdown