Javascript 基于更改表单值使div消失并重新显示

我有几个基本相同的下拉列表。我希望它在选择一个非空白值后，会出现“<代码>信息div /代码>”，并且选择空白值会使<代码>信息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>

警报正在工作，因此我知道

.change

没有问题。但是，我不知道如何使

信息div

出现。上面的代码不起作用。另一个问题是，这将导致下拉列表的任何更改触发

信息div

，但我只希望在值从空变为非空或反之亦然时触发它。如何做到这一点。

更改：

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

致：

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

您可以使用

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

---

希望有帮助

这是您要选择的.information类，而不是.ride\u information，对吗？啊，对不起，使用.information。不，我要你的信息。我在上面对它进行了编辑。这是一个好的开始，但并没有解决“我只希望在值从空变为非空或从非空变为非空时触发它。”这是问题的一部分。@Mic-yup，已更新。当我发布答案的时候，我正在做小提琴。谢谢，我试过了，但没用。它根本没有改变信息部门。

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

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