如果从一个选择和另一个选择中选择选项，则显示 div 元素答案

【问题标题】：Show div element if select option from one select AND another select如果从一个选择和另一个选择中选择选项，则显示 div 元素
【发布时间】：2018-01-18 20:56:21
【问题描述】：

我想知道在从一个选择中选择选项然后从另一个选择中选择选项后如何显示一个元素。如果我有 2 个选定选项，则 div 需要显示，否则隐藏。我试过这个，但它不工作。如何使用更改功能或其他方法来做到这一点？谢谢。

if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
    jQuery('.box').show();
 } else { 
         jQuery('.box').hide();
         }

【问题讨论】：

标签： javascript jquery html select option

【解决方案1】：

试试这个

我已经在页面上所有具有demoSelect 类的select 元素上添加了一个侦听器。

您不想为页面上的所有select 元素添加侦听器，因为您可能有其他不需要相同逻辑的select 元素。将它们包装在一个类中，然后选择该类，而不是允许这样做。

//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的信息

【讨论】：

让我做最后一个更改，我们应该使用 on() 方法，而不是使用 change() 方法。

【解决方案2】：

这里有一个解决方案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>

$('select').change(function(){
   if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
      $('.box').show();
   } else { 
      $('.box').hide();
   }
});

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

您需要将代码包装在“更改”事件侦听器中。

有几种方法可以做到这一点，但这应该可以正常工作。

$('select.one').change(function() {
    if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
        $('.box').show();
     } else {
        $('.box').hide();
    }
});

【讨论】：

【解决方案4】：

试试这个

$(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();
     }
 });

【讨论】：