根据更改的表单值使div消失并重新出现

Question

我有几个基本相同的下拉菜单。 我想要这样，以便选择一个非空白值将使information div出现后，选择空白值将使information div消失。 信息div应该开始是不可见的。 这是html：

<div class="form-group">
    <select class="form-control time_range_dropdown">
       <option value=""></option>
       <option value="Morning">Morning</option>
       <option value="Afternoon">Afternoon</option>
    </select>
</div>
<div class="information" style="display: none;">
    Some information goes here
</div>
<div class="form-group">
    <select class="form-control time_range_dropdown">
       <option value=""></option>
       <option value="Morning">Morning</option>
       <option value="Afternoon">Afternoon</option>
    </select>
</div>
<div class="information" style="display: none;">
    Different information goes here
</div>
<div class="form-group">
    <select class="form-control time_range_dropdown">
       <option value=""></option>
       <option value="Morning">Morning</option>
       <option value="Afternoon">Afternoon</option>
    </select>
</div>
<div class="information" style="display: none;">
    Even more different information goes here
</div>

这是jQuery：

$('.time_range_dropdown').change(function(){
  alert('dropdown is changing');
  $(this).next(".information").show();
});

警报正在运行，因此我知道.change没问题。 我不知道如何使information div出现。 上面的代码不起作用。 另一个问题是，这将导致下拉列表的任何更改触发information div但我只希望在值从空白更改为非空白或反之时触发它。 我该怎么做呢。

Answer 1

更改：

$(this).next(".ride_information").show();

至：

$(this).parent().next(".information").toggle(this.value.length);

.next（）选择下一个同级，但是您需要遍历DOM（首先使用.parent（））。

jsFiddle示例

Answer 2

您可以使用closest()选择正确的父级，然后使用next()选择相应的信息。

因此，它将是：

$('.time_range_dropdown').change(function(){
    var value = $(this).val();

    if (value == '')
        $(this).closest('.form-group').next(".information").hide();
    else
        $(this).closest('.form-group').next(".information").show();
});

希望能帮助到你！