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

当前回答

这个解决方案在Chrome中存在排序问题（jQuery 1.7.1）（Chrome按名称/编号对对象财产进行排序？）所以为了保持秩序（是的，这是滥用对象），我改变了这个：

optionValues0 = {"4321": "option 1", "1234": "option 2"};

到此为止

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

然后每个$.看起来像：

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

2012-09-21 09:27:00

其他回答

获取对象键以获取对象值。使用map（）添加新选项。

常量选择值={“1”：“测试1”，“2”：“测试2”}const selectTest=document.getElementById（'selectTest'）Object.keys（selectValues）.map（key=>selectTest.add（新选项（selectValues[key]，key）））<select id=“selectTest”></select>

2020-02-27 11:31:59

由于JQuery的append可以将数组作为参数，所以我很惊讶没有人建议将其与map一起使用

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

或减少

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));

2019-01-17 20:15:31

 $.each(response, function (index,value) {
                        $('#unit')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.title));
                    });

2021-10-22 05:44:29

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

optionValues0 = {"4321": "option 1", "1234": "option 2"};

到此为止

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

然后每个$.看起来像：

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

2012-09-21 09:27:00

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

推荐文章

最新文章

标签