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

当前回答

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

这只在第一次构建一个巨大字符串后操纵DOM一次。

2013-10-02 17:16:31

其他回答

这稍微更快更干净。

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

实际上，为了获得更好的性能，最好单独制作选项列表并附加到选择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

这看起来更好，提供了可读性，但比其他方法慢。

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

如果您想要速度，最快（经过测试）的方法是使用数组，而不是字符串串联，并且只使用一个追加调用。

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

2009-12-21 15:50:52

纯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向JavaScript对象中的选择添加选项的最佳方法是什么？

推荐文章

最新文章

标签