如果来自一个 select 和另一个 select 的 select 选项,则显示 div 元素
Show div element if select option from one select AND another select
我想知道如何在一个 select 的 select 选项和另一个 select 的 select 选项之后显示一个元素。如果我有 2 个 selected 选项 div 需要显示,否则隐藏。我试过了,但没有用。我怎样才能使用更改功能或其他功能来做到这一点?谢谢。
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
试试这个
$(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();
}
});
您需要将代码包装在 "change" 事件侦听器中。
有几种方法可以做到这一点,但这应该可以正常工作。
$('select.one').change(function() {
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
给你一个解决方案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
$('select').change(function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
希望对您有所帮助。
试试这个
我已经在页面上具有 class demoSelect
.
的所有 select
元素上包含了一个监听器
您不想为页面上的所有 select
元素添加侦听器,因为您可能有其他 select
元素不需要相同的逻辑。将它们包装在 class 中,然后在 class 上选择,而不是允许这样做。
//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>
有关 on()
方法的更多信息 here
我想知道如何在一个 select 的 select 选项和另一个 select 的 select 选项之后显示一个元素。如果我有 2 个 selected 选项 div 需要显示,否则隐藏。我试过了,但没有用。我怎样才能使用更改功能或其他功能来做到这一点?谢谢。
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
试试这个
$(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();
}
});
您需要将代码包装在 "change" 事件侦听器中。
有几种方法可以做到这一点,但这应该可以正常工作。
$('select.one').change(function() {
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
给你一个解决方案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
$('select').change(function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
希望对您有所帮助。
试试这个
我已经在页面上具有 class demoSelect
.
select
元素上包含了一个监听器
您不想为页面上的所有 select
元素添加侦听器,因为您可能有其他 select
元素不需要相同的逻辑。将它们包装在 class 中,然后在 class 上选择,而不是允许这样做。
//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>
有关 on()
方法的更多信息 here