UNANSWERED - 第二个下拉内容取决于第一个下拉列表

Question

在我的网页上，我想要两个下拉列表，如果您从第一个下拉列表中选择不同的选项，则第二个下拉列表中将显示不同的选项-下。

例如，
 如果A类被选择在下拉1，
 欲A1，A2，A3出现在下拉2.
       如果B类被选中下拉1
       我想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？

Answer 1

使用jQuery事件.on并听取选择框1中的更改​​。如果所选选项已更改，请查找选择了哪个值，然后修改与选定选项有关的第二个选择框。

这里有一个简单的片断

$(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(); 
 
     }); 
 
    } 
 
    }); 
 
});

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