如果從一個選擇和另一個選擇中選擇選項，則顯示div元素

Question

我想知道如何在從一個選擇中選擇選項後再顯示一個元素，然後從另一個選擇中選擇選項。如果我有2個選定的選項，div需要顯示，否則隱藏。我試過這個，但它不起作用。我如何使用更改功能或其他功能來做到這一點？謝謝。

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

Answer 1

你需要用你的代碼在一個 「變」 事件偵聽器。

有幾種方法可以做到這一點，但這應該很好。

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

Answer 2

試試這個

$(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 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

試試這個

伊夫包括在網頁上的所有select元素有類demoSelect的監聽器。

您不想爲您的頁面上的所有select元素添加偵聽器，因爲您可能有其他select元素不需要相同的邏輯。將它們包裝在課堂上，然後在課堂上選擇，就可以實現這一點。在on()方法

//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>

更多信息here