選擇的具體選項在下一個選擇中添加選項

Question

我有兩個<select> s，第一個<select>有一堆<option> s但是第二個<select>沒有。我希望在第一個<select>中的每個<option>在第二個<select>中添加不同的選項，最好使用JavaScript/jQuery。

例如

<select id="firstSelect"> 
    <option val="1">1</option> 
    <option val="2">2</option> 
    <option val="3">3</option> 
</select> 

<select id="addOptions"> 
<!--Add stuff here!--> 
</select> 

什麼會發生在上面的代碼中選擇選項1將選項A，B和C添加到#adoptions而選項2將增加d和E選項#adoptions，和選項3將增加期權F ，G，H和I到#adoptions。

編輯：我已經試過這樣：

function dropdownChecker() { 
switch($('select#weapon').val()) { 
    case "1": 
     $("#dropSpace").append('<option>My option</option>'); 
     break; 
    case "2": 
     $("#dropSpace".append('<option>Second Option</option>')) 
     break; 
} 
$(document).ready(dropdownChecker()); 

Answer 1

您需要創建的要在第二select插入選項的array。在此之後，基於價值從第一個下拉選擇，你必須創建和使用這種簡單的代碼在第二個下拉填充選項：

$.each(optionsArray, function(key, value) { 
    $('#addOptions') 
    .append($("<option></option>") 
     .attr("value", value) 
     .text(value)); 
}); 

下面是完整的例子：

$("#firstSelect").on('change', function() { 
 
    var optionsArray = ''; 
 
    switch ($(this).val()) { 
 
    case "1": 
 
     optionsArray = ['A', 'B', 'C']; 
 
     break; 
 
    case "2": 
 
     optionsArray = ['D', 'E']; 
 
     break; 
 
    case "3": 
 
     optionsArray = ['F', 'G', 'H', 'I']; 
 
     break; 
 
    } 
 
    $('#addOptions').empty(); 
 
    $.each(optionsArray, function(key, value) { 
 
    $('#addOptions') 
 
     .append($("<option></option>") 
 
     .attr("value", value) 
 
     .text(value)); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#firstSelect").trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="firstSelect"> 
 
    <option val="1">1</option> 
 
    <option val="2">2</option> 
 
    <option val="3">3</option> 
 
</select> 
 

 
<select id="addOptions"> 
 
<!--Add stuff here!--> 
 
</select>