div要素を1つの選択肢から選択すると表示するANDもう1つの選択

Question

1つの要素から選択した後に要素を表示し、別の要素から選択肢を選択する方法を知りたい私が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

試してみてください。この

アイブ氏は、クラス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>

それが働いているhere