[英]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.