使用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(''));

其他回答

这稍微更快更干净。

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>

纯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></选择>

大多数其他答案使用each函数对selectValues进行迭代。这需要为每个元素调用append,并在单独添加每个元素时触发回流。

将此答案更新为更惯用的函数方法(使用现代JS)可以形成为只调用append一次,使用map和option元素构造函数创建一个option元素数组。

使用OptionDOM元素应该可以减少函数调用开销,因为在创建后不需要更新Option元素,也不需要运行jQuery的解析逻辑。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

如果您创建一个将新建选项对象的工厂实用程序函数,则可以进一步简化此过程:

const newoption = (...args) => new Option(...args)

然后,这可以直接提供给地图:

$('mySelect').append($.map(selectValues, newoption))

以前的公式

因为append还允许将值作为可变数量的参数传递,所以我们可以预先创建选项元素映射列表,并使用apply将它们作为参数附加到单个调用中。

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

在jQuery的后续版本中,append也接受数组参数,这可以稍微简化:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

尽管前面的答案都是有效的答案,但最好先将所有这些附加到documentFragmnet,然后将该文档片段作为元素附加到。。。

看看约翰·雷格对此事的看法。。。

大致如下:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

简单的方法是:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");