比较两个选项的选项并隐藏如果值！= id

Question

我有两个select元素。我想比较第一个选择中所选选项的值与第二个选定选项的id。我的jQuery代码看起来是这样的：

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

然而，这总是隐藏所有的选项。我究竟做错了什么？

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>