使div消失，並根據更改的表單值重新出現

我有幾個下拉菜單基本相同。我想要它，以便選擇其中一個非空白值將使information div出現後選擇空白值將使information div消失。信息分區應該開始隱形。下面是HTML：使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;"> 
    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，但我只希望在值從空白變爲非空白或反之時觸發。我該怎麼做呢。

來源

2016-01-04 Philip7899

這是您想要選擇的.information類，而不是.ride_information，是否正確？ – Mic

啊，對不起，使用.information。不是.ride_information。我在上面編輯它。 – Philip7899

您可以使用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(); 
});

希望它能幫助！

來源

2016-01-04 19:15:57

謝謝，我試過了，但沒有奏效。它根本不會改變信息分部。 – Philip7899

其實它的工作。謝謝！ – Philip7899

請記住接受它作爲答案。很高興幫助！ –

變化：

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

到：

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

的.next（）選擇下一個兄弟，但你需要遍歷了DOM（使用.parent（））第一。

jsFiddle example

來源

2016-01-04 19:13:19 j08691

好的開始，但沒有解決「我只希望在值從空白變爲非空白或反之時觸發。」問題的一部分。 – Mic

@Mic - yup，已更新。當我發佈答案時，我正在研究小提琴。 – j08691

使div消失，並根據更改的表單值重新出現

回答

相關問題