[英]JQuery - Show Hide DIVS based on 2 different select drop down values
我創建了2個select下拉列表,並顯示/隱藏了一個div。 但是,我想根據2個值(分別從2個單獨的下拉列表中選擇)來確定div的基數。
請參閱下面的工作代碼,以基於一個值顯示div / show隱藏,我需要再次對其進行過濾以適應選項2。
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="bfcn")
{
$(".discount-info").not(".bfcn").hide();
$(".bfcn").show();
}
else{
$(".discount-info").hide();
}
});
})
.change();
});
的HTML
<div>
<select>
<option>Where are you travelling to?</option>
<option value="bfcn">Belfast</option>
<option value="bflp">Liverpool</option>
</select>
<select class="peak">
<option>What month are you travelling in?</option>
<option value="offpeak">March, April, May, September</option>
<option value="peak">July, August</option>
</select>
</div>
<div class="bfcn discount-info">
<div class="content"> PDF LINK HERE </div>
</div>
無需循環。 嘗試這個:
<script>
$(document).ready(function(){
$('select').change(function(){
if (($(this).val() == 'bfcn') && ($(this).siblings('select').val() == 'bfcn')){
$('.bfcn').show();
} else {
$('.bfcn').hide();
}
});
});
</script>
僅當兩個選擇的值均正確時,才執行顯示。 您甚至可以在else if語句中運行一系列值,以在不同的選擇上顯示不同的內容。 如果您有兩個以上的選擇而兄弟姐妹不起作用,則可以使用直接類,但是從您的問題來看這應該起作用。
這是我的演示HTML:
<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="bfcn">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="bfcn">bfcn</option>
</select>
<p class="bfcn" style="display: none;">BFCN</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.