如果一個選擇和另一個選擇中的選擇選項顯示div元素

Question

我想知道如何從一個選擇中選擇選項然后從另一個選擇中選擇選項后顯示一個元素。 如果我有2個選擇的選項，則div需要顯示，否則要隱藏。 我試過了，但是沒有用。 我該如何使用變更功能或其他功能？ 謝謝。

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

Answer 1

嘗試這個

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

Answer 2

您需要將代碼包裝在“更改”事件偵聽器中。

有幾種方法可以執行此操作，但這應該可以正常工作。

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

Answer 3

在這里，您可以找到解決方案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();
   }
});

希望這會幫助你。

Answer 4

嘗試這個

Ive在頁面上所有具有demoSelect類的select元素中都包含一個偵聽demoSelect 。

您不想將偵聽器添加到頁面上的所有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()方法的更多信息，請參見此處