比较两个选择的选项，如果 value != 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>