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>