第二个下拉内容取决于第一次下拉

时间:2017-06-22 21:06:33

标签: javascript jquery drop-down-menu html-select

在我的网页上,我想要有两个下拉菜单,如果您从第一个下拉列表中选择不同的选项,则第二个下拉菜单中会显示不同的选项。

例如,
如果在下拉列表1中选择类别A ,则 我希望 A1 A2 A3 出现在下拉菜单2中。
如果在下拉菜单1中选择 B类,则 我希望 B1 B2 B3 出现在下拉菜单2中。

如果我的HTML有这些文字行:

<select id="independent">
  <option value="CatA"> A </option>
  <option value="CatB"> 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>

如何使用JavaScript / jQuery实现我想要的内容?

1 个答案:

答案 0 :(得分:-1)

使用jQuery事件.on并收听选择框中的更改1.如果更改了所选选项,请查找选择的值,然后修改与所选选项相关的第二个选择框。

这是一个简单的代码段

&#13;
&#13;
$(document).ready(function() {
  $("#dependent > option").hide();

  $(document).on('change', '#independent', function() {
    var val = $(this).val();
    console.log(val);
    $("#dependent > option").show();
    if (val == 'CatA') {
      $("#dependent > option").each(function() {
        var optionVal = $(this).val();
        var letter = optionVal.charAt(0);
        //console.log(letter);
        if (letter == 'B')
          $(this).hide();
      });
    } else if (val == 'CatB') {
      $("#dependent > option").each(function() {
        var optionVal = $(this).val();
        var letter = optionVal.charAt(0);
        //console.log(letter);
        if (letter == 'A')
          $(this).hide();
      });
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value=""> Select </option>
  <option value="CatA"> A </option>
  <option value="CatB"> B </option>
</select>

<select id="dependent">
  <option value=""> Select </option>
  <option value="A1"> A1 </option>
  <option value="A2"> A2 </option>
  <option value="A3"> A3 </option>
  <option value="B1"> B1 </option>
  <option value="B2"> B2 </option>
  <option value="B3"> B3 </option>
</select>
&#13;
&#13;
&#13;