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

当前回答

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（）方法中进行了一些解析）

2009-11-05 19:42:53

其他回答

JSON格式：

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

以及jQuery代码，用于填充Ajax成功时下拉列表的值：

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

2016-07-30 10:43:29

被警告。。。我在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);

2011-09-16 13:22:45

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

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

2010-07-21 16:14:14

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

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

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的动态选择列表

2010-02-05 11:56:17

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

推荐文章

最新文章

标签