使用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 options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

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

其他回答

与其他答案相同,以jQuery方式:

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

大多数其他答案使用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)))

被警告。。。我在Android 2.2(Cyanogen 7.0.1)手机(T-Mobile G2)上使用jQuery Mobile 1.0b2和PhoneGap 1.0.0,根本无法使用.append()方法。我不得不像下面这样使用.html():

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

它与jQuery1.4.1配合得很好。

有关在ASP.NET MVC和jQuery中使用动态列表的完整文章,请访问:

使用MVC和jQuery的动态选择列表

对老@joshberry的回答进行了改进:

看起来plain.append也能像预期的那样工作,

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

或更短,

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);