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

当前回答

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

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

2010-07-21 16:14:14

其他回答

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

我做了一些测试，我相信这是最快的P

2009-11-09 06:29:54

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

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

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

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

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

2013-10-11 17:20:06

纯JS

在纯JS中，添加下一个选项来选择更容易、更直接

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

让selectValues＝｛“1”：“test 1”，“2”：“test2”｝；for（输入selectValues）｛mySelect.innerHTML+=`<option value=“$｛key｝”>$｛selectValues[key]｝</option>`；}<select id=“mySelect”><option value=“0”selected=“selected”>测试0</option></选择>

2020-08-25 20:09:18

这里可以找到jQuery插件：使用jQuery和AJAX自动填充选择框。

2010-12-24 16:23:44

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

推荐文章

最新文章

标签