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

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

试试： 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);
});

Answer 2

您可以使用多种jQuery实用工具，例如$.map或$.grep来过滤数据。

$('#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/