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

IT技术 javascript jquery html-select
2021-01-12 08:56:27

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

我正在寻找不需要插件的东西，但我也对那里的插件感兴趣。

这就是我所做的：

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() 中选项的关闭标记，并且 (2) 将属性/属性作为 append() 的第二个参数移动到映射中。

6个回答

与其他答案相同，以 jQuery 方式：

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});
我会首先分配$("#mySelect")给一个 var，否则$("#mySelect")每次在循环内调用都是非常浪费的，更新 DOM 也是如此。请参阅artzstudio.com/2009/04/jquery-performance-rules/ 上的第 3 点和第 6 点...
2021-03-31 08:56:27 
var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

通过这种方式，您只“接触 DOM”一次。

我不确定最新的行是否可以转换为 $('#mySelect').html(output.join('')) 因为我不知道 jQuery 内部结构（也许它在 html()方法）

如果key有一些引号或其中包含引号>, <，则会中断。
2021-03-29 08:56:27
You 方法显然比上面的“正确”答案更快，因为它也使用较少的 jQuery。
2021-04-03 08:56:27

这稍微更快更干净。

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

它认为缓存 ` $('#mySelect')` 是一个更好的主意，这样你在循环之前只查找一次。目前，它正在为每个选项在 DOM 中搜索元素。
2021-03-24 08:56:27

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

原生 JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

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

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

它在功能上等同于，但比：

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
其它你可能感兴趣的问题
上一篇JavaScript 检查变量是否存在（已定义/初始化） 下一篇检查复选框是否被 jQuery 选中