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/

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

2 个答案: