基于第一个下拉菜单的第二个下拉选项

Question

在网页上，如果您在第一个下拉菜单中选择不同的选项，则第二个下拉菜单中会出现不同的选项。

<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

这是我目前拥有的 jQuery：

$(function() {

    $('#independent').on('change', function (e) {
        var endingChar = $(this).val().split('').pop();
        var selected = $( '#independent' ).val();
          $('#dependent option[value^='+selected+']').toggle(endingChar == selected);
        $('#dependent').val('');
    })

});

我在这里要做的是
1.将变量selected设置为第一个下拉列表中选择的选项的值
2. 使用该值查看所有第二个下拉选项的值的第一个字母，以填充我想在第二个下拉列表中看到的内容

但是，当我从第一个下拉列表中选择任何内容时，所有选项（A1 到 B3）都会出现在第二个下拉列表中。怎么了？

Answer 1

你可以这样试试。

首先使用toggleClass()隐藏所有选项并只显示匹配的选项

$(function() {

    $('#independent').on('change', function (e) {
    $('#dependent').val('');
        var endingChar = $(this).val().split('').pop();       
        var selected = $( '#independent' ).val();
          $('#dependent option').addClass('show');
 
          $('#dependent option[value^='+selected+']').toggleClass('show');
    })

});

.show{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

Answer 2

以下循环遍历选项。如果选项的值不是以正确的第一个字母开头，则会添加一个类以通过 css 隐藏。如果匹配，则删除该类。它还会选择与正确字母匹配的第一个选项，因此不会选择隐藏选项。

$(function() {
    $('#independent').on('change', function (e) {

      var selected = $('#independent').val().toUpperCase();
      var currentDep = $('#dependent').val().charAt(0).toUpperCase();
      var changedSelected = false;

      $('#dependent option').each(function() {

        var opt = $(this);
        var value = opt.val().charAt(0).toUpperCase();

        if (value !== selected) {

          opt.addClass('hide');
          opt.removeAttr('selected');

        } else {

          opt.removeClass('hide');

          if (!changedSelected) {

            opt.attr('selected', 'selected');
            changedSelected = true;

          } else {
            opt.removeAttr('selected');
          }
        }
      });
    });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

Answer 3

$(function() {
    $('#independent').on('change', function (e) {

      var selected = $('#independent').val().toUpperCase();
      var currentDep = $('#dependent').val().charAt(0).toUpperCase();
      var changedSelected = false;

      $('#dependent option').each(function() {

        var opt = $(this);
        var value = opt.val().charAt(0).toUpperCase();

        if (value !== selected) {

          opt.addClass('hide');
          opt.removeAttr('selected');

        } else {

          opt.removeClass('hide');

          if (!changedSelected) {

            opt.attr('selected', 'selected');
            changedSelected = true;

          } else {
            opt.removeAttr('selected');
          }
        }
      });
    });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>