Question

我有几个基本相同的下拉菜单。我想要它，以便选择其中一个非空白值后会显示，选择空白值会使information div消失。信息div应该开始隐形。这是html：

information div

这是jquery：

<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>

警报正在运行，所以我知道$('.time_range_dropdown').change(function(){ alert('dropdown is changing'); $(this).next(".information").show(); });没有问题。我无法弄清楚如何让.change出现。上面的代码不起作用。另一个问题是，这将导致下拉列表的任何更改触发information div，但我只希望在值从空白变为非空白时反之亦然，反之亦然。我该怎么做。

Answer 1

变化：

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

为：

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

.next（）选择下一个兄弟，但是你需要首先遍历DOM（使用.parent（））。

<强> jsFiddle example

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();
});

希望它有所帮助！

使div消失并根据形式值的变化重新出现

2 个答案: