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。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

比较两个选项中的选项并隐藏if！= id

1 个答案: