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

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>