[英]Show div element if select option from one select AND another select
I want to know how to show one element after I select option from one select and then select option from another select. 我想知道如何从一个选择中选择选项然后从另一个选择中选择选项后显示一个元素。 If I have 2 selected options the div need to show, else to hide.
如果我有2个选择的选项,则div需要显示,否则要隐藏。 I tried this, but it is not working.
我试过了,但是没有用。 How can I do it with change function or something else ?
我该如何使用变更功能或其他功能? Thanks.
谢谢。
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
Try this 尝试这个
$(document).on("change","select.one,select.two",function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
});
You need to wrap your code in a "change" event listener. 您需要将代码包装在“更改”事件侦听器中。
There are several ways of doing it, but this should work fine. 有几种方法可以执行此操作,但这应该可以正常工作。
$('select.one').change(function() {
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
Here you go with a solution https://jsfiddle.net/axaryfb2/ 在这里,您可以找到解决方案https://jsfiddle.net/axaryfb2/
$('select').change(function(){ if (($('select.one option').is(':selected') && $('select.one option:selected').val() != "") && ($('select.two option').is(':selected') && $('select.two option:selected').val() != "")) { $('.box').show(); } else { $('.box').hide(); } });
.box{ width: 100px; height:100px; background: blue; display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="one"> <option value="">Select Option</option> <option value="test1">test 1</option> <option value="test2">test 2</option> </select> <select class="two"> <option value="">Select Option</option> <option value="testA">test A</option> <option value="testB">test B</option> </select> <div class="box"> </div>
JS JS
$('select').change(function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
Hope this will help you. 希望这会帮助你。
Try this 尝试这个
Ive included a listener on all select
elements on the page that have the class demoSelect
. Ive在页面上所有具有
demoSelect
类的select
元素中都包含一个侦听demoSelect
。
You dont want to add a listener to all select
elements on your page as you may have other select
elements that dont require the same logic. 您不想将侦听器添加到页面上的所有
select
元素,因为您可能还有其他不需要相同逻辑的select
元素。 Wrapping them in a class and then selecting on the class instead allows for this. 将它们包装在一个类中,然后在该类上进行选择即可。
//use the on() method to attach event handlers, this replaces the live(), delegate() and bind() methods from previous JQuery versions $(".demoSelect").on("change", function() { //if values for both dropdowns are set to "1" if( $("#one").val() == "1" && $("#two").val() == "1") { //show the div $(".box").show(); } else { //hide the div $(".box").hide(); } });
.container { border: 1px solid black; height: 70px; } .padding { padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- example of select options that are affected by the above javascript !--> <div class="container"> <div class="padding"> <span> This select group uses the script because of the '.demoSelect' class </span><br/> <select id="one" class="demoSelect"> <option> Please Select </option> <option> 1 </option> <option> 2 </option> </select> <select id="two" class="demoSelect"> <option> Please Select </option> <option> 1 </option> <option> 2 </option> </select> </div> <div class="box padding" hidden>test</div> </div><br/> <!-- example of select options that arent affected by the above javascript !--> <div class="container"> <div class="padding"> <span> This select group is unaffected by the script </span><br/> <select id="separateSelectOptionOne"> <option> Please Select </option> <option> 1 </option> <option> 2 </option> </select> <select id="separateSelectOptionTwo"> <option> Please Select </option> <option> 1 </option> <option> 2 </option> </select> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.