每当我更改第一个下拉列表中的选项时，都需要 jquery 将第二个下拉列表的默认选项更改为 "select"

Question

这是我正在使用的jquery。当我选择州时，我能够在地区中获得 "select"，但是当我一次又一次地选择不同的州而不触及地区时，地区中的值会更改为每个地区的最后一个选项。我希望每次更改状态时默认设置为 "select"(disabled)。

<script>
  $(document).ready(function() {
    $('#select3').selectmenu('disable');
    $("#select2").change(function() {
      if ($(this).data('options') === undefined) {
        $(this).data('options', $('#select3 option').clone());
      }
      var id = $(this).val();
      var option = $(this).data('options').filter('[value=' + id + ']');
      $('#select3').html(option);
      $('#select3').selectmenu('refresh');
      $('#select3').selectmenu('enable');
    });
  });

 <body>
          <label for="select2">State:</label>
          <select name="select2" id="select2">
                <option value = "0">Select</option>
                <option value = "1">Maharashtra</option>
                <option value = "2">Gujarat</option>
                <option value = "3">Rajasthan</option>
           </select>

        <label for="select3">District:</label>
        <select name="select3" id="select3">
               <option value = "0">Select State</option>
               <option value = "1">Select</option>
               <option value = "1">Pune</option>                       
               <option value = "1">Vidarbha</option>
               <option value = "1">Thane</option>
               <option value = "2">Select</option>
               <option value = "2">Bharuch</option>
               <option value = "2">Ahmedabad</option>
               <option value = "2">Jamnagar</option>
               <option value = "3">Select</option>
               <option value = "3">Jaipur</option>
               <option value = "3">Jodhpur</option>
               <option value = "3">Bikaner</option>
           </select>
</body>

Answer 1

您可以单独使用 CSS 来隐藏页面加载时的其他值，然后通过 select3 选项进行过滤。（你不能使用你的$(this).data('options').filter，因为this指的是#select2，而不是#select3，所以状态选项保持不变）

const select2 = $("#select2");
select2.change(() => {
  const stateVal = select2.val();
  const select3Options = $('#select3').children();
  select3Options.show();
  select3Options.filter((_, elm) => elm.value && elm.value !== stateVal).hide();
  select3Options[0].selected = 'selected';
});

#select3 > option:not([value="0"]) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <label for="select2">State:</label>
  <select name="select2" id="select2">
    <option value = "0">Select</option>
    <option value = "1">Maharashtra</option>
    <option value = "2">Gujarat</option>
    <option value = "3">Rajasthan</option>
  </select>

  <label for="select3">District:</label>
  <select name="select3" id="select3">
    <option value = "0">Select State</option>
    <option value = "1">Pune</option>
    <option value = "1">Vidarbha</option>
    <option value = "1">Thane</option>
    <option value = "2">Bharuch</option>
    <option value = "2">Ahmedabad</option>
    <option value = "2">Jamnagar</option>
    <option value = "3">Jaipur</option>
    <option value = "3">Jodhpur</option>
    <option value = "3">Bikaner</option>
  </select>
</body>

每当我更改第一个下拉列表中的选项时，都需要 jquery 将第二个下拉列表的默认选项更改为 "select"

need jquery to change the default option of 2nd dropdown to "select" whenever i change options in 1st dropdown

html

javascript

jquery

jquery-mobile