使用jQuery向JavaScript对象中的选择添加选项的最佳方法是什么？

使用jQuery从JavaScript对象向＜select＞添加选项的最佳方法是什么？

我正在寻找一些不需要插件的东西，但我也会对现有的插件感兴趣。

这是我所做的：

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

干净/简单的解决方案：

这是matdumsa的清理和简化版本：

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

matdumsa的更改：（1）删除了append（）内选项的close标记，（2）将财产/属性作为append）的第二个参数移动到映射中。

当前回答

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

2017-10-30 13:27:38

其他回答

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

它与jQuery1.4.1配合得很好。

有关在ASP.NET MVC和jQuery中使用动态列表的完整文章，请访问：

使用MVC和jQuery的动态选择列表

2010-02-05 11:56:17

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

2017-10-30 13:27:38

我把两个最好的答案组合成一个好答案。

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

2015-10-08 03:06:42

实际上，为了获得更好的性能，最好单独制作选项列表并附加到选择id。

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

2018-09-06 05:20:04

使用$.map（）函数，可以以更优雅的方式执行此操作：

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

2017-07-10 18:24:54

使用jQuery向JavaScript对象中的选择添加选项的最佳方法是什么？

推荐文章

最新文章

标签