如何在jquery的下拉列表中添加值

时间:2014-06-20 07:49:10

标签: jquery html5 css3 jquery-mobile cordova

让我们考虑多维数组包含一些记录,我有两个下拉列表 1)list1
2)list2
现在,
我想通过更改list1在list2上添加数组值。如果list1的值是" -1"那么list2必须被删除或隐藏。否则清空list2,使其可见并从list1中的数组插入值。我已经做到了,但有些问题我无法解决。请帮帮我 提前谢谢。
这是代码:

<select id="list1" onchange="changeVal(this.value);">
   <option value="-1">Select any option</option>
   <option value="0">test1</option>
   <option value="1">test2</option>
   <option value="2">test3</option>
</select>
<select id="list2">
</select>

function changeVal(i){
  var Arr = [
    ['Dummy 1.1','Dummy 1.2','Dummy 1.3'],
    ['Dummy 2.1','Dummy 2.2','Dummy 2.3'],
    ['Dummy 3.1','Dummy 3.2','Dummy 3.3']
];

if(i != "-1"){
    $("#list2").html("");
    $("#list2").css("visibility","visible");
    for (var addOption = 0; addOption < Arr[i].length; addOption++){
        var option = $("<option></option>");
        $("#list2").append(option);
        option.html(Arr[i][addOption]);
    }
}

else{
      $("#list2").remove();
   }
}

2 个答案:

答案 0 :(得分:1)

添加选项以选择使用此

 for (var addOption = 0; addOption < Arr[i].length; addOption++) {
            $('#list2').append($('<option>', {
                value: addOption ,
                text: Arr[i][addOption] 
            }));
        }

Demo

答案 1 :(得分:0)

尝试如下:

$('#list1').change(function () {   
var i = $(this).val();
if(i>-1){
  $('#list2').empty();
  $('#list2').show();
  for(var k=0;k<Arr[i].length;k++){
    $('#list2').append(
        $('<option>', {
        value: Arr[i][k],
        text: Arr[i][k]
        }, '<option/>')
    );
  }
}
else{
   $('#list2').hide();
    }
});

这个小提琴将帮助你:http://jsfiddle.net/3nEWg/1/