使用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）的第二个参数移动到映射中。

当前回答

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

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

其他回答

如果您不必支持旧的IE版本，那么使用Option构造函数显然是一种可读且高效的解决方案：

$(new Option('myText', 'val')).appendTo('#mySelect');

它的功能等同于，但比：

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

2008-10-05 15:49:09

所有这些答案似乎都不必要地复杂。您只需要：

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

这是完全跨浏览器兼容的。

2013-10-11 17:20:06

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

2017-10-30 13:27:38

这稍微更快更干净。

var选择值={“1”：“测试1”，“2”：“测试2”};var$mySelect=$（'#mySelect'）；//$.each（选择值、功能（键、值）{var$option=$（“<option/>”{value：键，文本：值});$mySelect.append（$option）；});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><select id=“mySelect”></select>

2010-07-01 07:00:13

您可以使用以下代码迭代json数组

$（'<option/>'）.attr（“value”，“someValue”）.text（“Option1”）.appendTo（“#my select id”）；

2010-07-21 16:14:14

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

推荐文章

最新文章

标签