2つの選択肢からオプションを比較し、値が！idならば非表示にする

Question

私は2つのselect要素を持っています。最初の選択で選択したオプションの値と、2番目の選択したオプションのidを比較したいとします。

$("#billing_zone").change(function(){ 
    if ($('.zone:selected').val() != $('.day').attr("id")) { 
    $(".day").hide(); 
    } else { 
    $(".day").show(); 
    } 
}); 

<select name="billing_zone" id="billing_zone" class="select " data-placeholder=""> 
    <option class="zone" value="10">Birkeland, Tveit, Høvåg</option> 
    <option class="zone" value="6">Lillesand Birkeland bedrift</option> 
    <option class="zone" value="13">Lillesand</option> 
</select> 
<select name="billing_delivery_day" id="billing_delivery_day" class="select " data-placeholder=""> 
    <option class="day" id="10" value="1">Mandag</option> 
    <option class="day" id="10" value="2">Tirsdag</option> 
    <option class="day" id="6" value="3">Onsdag</option> 
    <option class="day" id="13" value="3">Onsdag</option> 
</select> 

しかし、これは常にすべてのオプションを隠す：私のjQueryのコードは次のようになります。私は間違って何をしていますか？

Answer 1

あなたはちょうどこのようなためidセレクタを使用することができます。

$(".day[id="+selected_zone+"]") 

ので、変更のすべてのオプションのを隠し、選択したゾーンの値でidに関連しているだけのものを示しています

$("#billing_zone").change(function(){ 
    var selected_zone = $('.zone:selected').val(); 

    $(".day").hide(); //Hide all the options 
    $(".day[id="+selected_zone+"]").show(); //Show the spedific one that match the selected 
}); 

注：id属性は同じ文書内で一意である必要があります。common classesまたはdata-* attributesを代わりに使用する方がよいでしょう。

これが役に立ちます。

$("#billing_zone").change(function(){ 
 
    var selected_zone = $('.zone:selected').val(); 
 
    
 
    $(".day").removeAttr('selected').hide(); 
 
    $(".day[id="+selected_zone+"]").show().eq(0).attr('selected', 'selected'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="billing_zone" id="billing_zone" class="select " data-placeholder=""> 
 
<option class="zone" value="10">Birkeland, Tveit, Høvåg</option> 
 
<option class="zone" value="6">Lillesand Birkeland bedrift</option> 
 
<option class="zone" value="13">Lillesand</option> 
 
</select> 
 
<select name="billing_delivery_day" id="billing_delivery_day" class="select " data-placeholder=""> 
 
<option class="day" id="10" value="1">Mandag</option> 
 
<option class="day" id="10" value="2">Tirsdag</option> 
 
<option class="day" id="6" value="3">Onsdag</option><option class="day" id="13" value="3">Onsdag</option> 
 
</select>