Question

我有一个选择字段和一个按钮：

<select id="mylist"></select>
<input type="button" id="btn" value="update">

我的js代码：

var btn=$('#btn');
btn.click(function(){
   var optionList = GET_LIST();// GET_LIST() returns a array of strings which is the option texts.

   //How to use optionList to update the options in <select> ?
});

如何在select标记中使用optionList更新我的选项列表？

Answer 1

编辑：基于来自@amsutil alternate的注释，使用html：

var btn=$('#btn');
btn.click(function(){
     var optionList = GET_LIST();
     var select  = $("#mylist");
     select.html("");
     var optionsHTML = "";
     $.each(optionList, function(a, b){
        optionsHTML += "<option>" + b + "</option>";
     });
     select.html(optionsHTML);
});

试试这个：

var btn=$('#btn');
btn.click(function(){
     var optionList = GET_LIST();
     var select  = $("#mylist");
      select.empty();
     $.each(optionList, function(a, b){
        select.append("<option>" + b + "</option>");
     });
});

Answer 2

使用$.map()将字符串数组转换为选项元素数组：

var optionList = GET_LIST();
var options = $.map(optionList, function (item, i) {
    return $('<option>', {text: item});   // Convert string into <option>
});
$('#mylist').empty().append(options);     // Append to the <select>

Answer 3

如果您想要从数组中创建选择选项，您的值和标签文本将匹配。如果您希望值和文本不同，则需要将它们存储在对象中：

var btn = $('#btn');

btn.click(function() {
    var optionList = GET_LIST();
    var element = $('#mylist');

    $.each(optionList, function(index, value) {
       element.append('<option value="' + value + '">' + value + '</option>');
    });
});

Answer 4

我使用'append'看到一些答案，但这会产生太多的DOM操作。如果阵列中有大量值，则可能会降低网站速度。将所有新选项存储在字符串中更好，并在最后执行一次DOM操作。

演示：http://jsbin.com/ubotu4/

如何在我的情况下更新<select>选项？</select>

4 个答案: