选择的具体选项在下一个选择中添加选项

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>