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


当前回答

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

其他回答

简单的方法是:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
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一次。

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

将HTML选择id设置为以下行。在这里,mySelect用作select元素的id。

   var options = $("#mySelect");

然后获取这个场景中的selectValues对象,并将其设置为每个循环的jquery。它将相应地使用对象的值和文本,并将其附加到选项选择中,如下所示。

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

当选择下拉列表时,这将显示文本作为选项列表,一旦选择文本,将使用所选文本的值。

Eg.

“1”:“测试1”,“2”:“测试2”,

下拉列表,

显示名称:测试1->值为1显示名称:测试2->值为2

我发现这很简单,效果很好。

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};