如何为输入框创建下拉列表取决于在另一个输入框的另一个下拉框中选择的值

Question

我有两个输入框作为下拉列表。要为第二个输入框创建的下拉列表取决于第一个输入字段中给出的值。

var firstarray =[{sym: "1", desc: "one"}, 
       {sym: "2", desc: "two"}, 
       {sym: "3", desc: "three"}]; 

var secondarray =[{sym: "4", desc: "four", firstarraycode: "2"}, 
        {sym: "5", desc: "five", firstarraycode: "2"}, 
        {sym: "6", desc: "six", firstarraycode: "1"}]; 

通过使用第一个数组，我创建了第一个输入框的下拉菜单。

sym第一个数组的值是第二个输入框的第三个字段（firstarraycode）。

根据第一个数组选择的值sym，第二个输入框的下拉值必须从数组中滤除。

例如，如果我们在第一个下拉列表中选择2，它会创建第二个下拉列表与sym值4和5。

Answer 1

您可以使用像$.map或$.grep这样的几个jQuery实用工具来过滤数据。

$('#select_one_ID').change(function(){ 
    var val=$(this).val(); 
    var optionsArray=$.grep(secondarray, function(item){ return item.firstarraycode == val; }); 

    /* loop over optionsArray to create new option tags*/ 

}); 

API参考：http://api.jquery.com/jQuery.grep/

Answer 2

尝试：http://jsfiddle.net/aF6Xq/

var firstarray =[{sym:"1",desc:"one"},{sym:"2",desc:"two"},{sym:"3",desc:"three"}]; 
var secondarray =[{sym:"4",desc:"four",firstarraycode:"2"},{sym:"5",desc:"five",firstarraycode:"2"},{sym:"6",desc:"six",firstarraycode:"1"}]; 

function fillsecond(array){ 
    $('#second').empty(); 
    $('#second').append("<option>Select</option>"); 
    for (i=0;i<array.length;i++){    
    $('<option/>').val(array[i].sym).html(array[i].desc).appendTo('#second'); 
    } 
} 
$('#first').append("<option>Select</option>"); 
$('#second').append("<option>Select</option>"); 

for (i=0;i<firstarray.length;i++){ 
    $('<option/>').val(firstarray[i].sym).html(firstarray[i].desc).appendTo('#first'); 
} 
$('#first').change(function(){ 
    var val=$(this).val(); 

    var tempArray = $.grep(secondarray, function(elem){ return elem.firstarraycode == val; }); 

    fillsecond(tempArray); 
});