使用jQuery作为JS对象向select中添加选项的最佳方法是什么？

Question

<select>使用jQuery从JavaScript对象添加选项的最佳方法是什么？

我正在寻找一些我不需要插件的东西,但我也会对那些插件感兴趣.

这就是我做的:

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)将属性/属性移动到map中作为append()的第二个参数.

Answer 1

与其他答案一样,以jQuery方式:

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

Answer 2

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

Answer 3

这稍微快一点.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

Answer 4

jQuery的

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

香草JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

Answer 5

使用DOM Elements Creator插件(我最喜欢的):

$(new Option('myText', 'val')).appendTo('#mySelect');

使用Option构造函数(不确定浏览器支持):

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

使用Option(避免额外的工作解析HTML Option):

$(new Option('myText', 'val')).appendTo('#mySelect');

Answer 6

这看起来更好,提供可读性,但比其他方法慢.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

如果你想要速度,最快(经过测试!)的方式就是这个,使用数组,而不是字符串连接,并且只使用一个追加调用.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

Answer 7

@joshperry

似乎普通.append也按预期工作,

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

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

Answer 8

所有这些答案似乎都不必要地复杂化.所有你需要的是:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

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

Answer 9

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

我做了一些测试,我相信,这项工作最快.:P

Answer 10

转发...我在Android 2.2(Cyanogen 7.0.1)手机(T-Mobile G2)上使用带有PhoneGap 1.0.0的jQuery Mobile 1.0b2并且无法使用.append()方法.我必须使用.html(),如下所示:

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

$('#selectMenu').html(options);

Answer 11

有一种方法使用Microsoft Templating方法,该方法目前正在提议包含在jQuery核心中.使用模板的能力更强,因此对于最简单的情况,它可能不是最佳选择.有关详细信息,请参阅Scott Gu的帖子,其中概述了这些功能.

首先包括可从github获得的模板化js文件.

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

接下来设置一个模板

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

然后用你的数据调用.render()方法

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

我已经更详细地发表了这种方法的博客.

Answer 12

我做了类似的事情,通过Ajax加载一个下拉项.上面的响应也是可以接受的,但是为了获得更好的性能,尽可能少地修改DOM总是好的.

因此,不是在循环中添加每个项目,而是最好在循环内收集项目并在完成后附加它.

$(data).each(function(){
    ... Collect items
})

附加它,

$('#select_id').append(items); 

甚至更好

$('#select_id').html(items);

Answer 13

简单的方法是:

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

Answer 14

前两个答案之间的妥协,在"一线"中:

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

使用map构建一个Option元素数组,然后使用apply将每个Option作为append函数的单独参数发送,将它们全部附加到Select .

Answer 15

而不是在任何地方重复相同的代码,我建议你更喜欢编写自己的jQuery函数,如:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

然后添加选项只需执行以下操作:

$('select').addOption('0', 'None');

Answer 16

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

它适用于jQuery 1.4.1.

有关在ASP.NET MVC和jQuery中使用动态列表的完整文章,请访问:http: //www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Answer 17

可以在此处找到 jQuery 插件：Auto-populating Select Boxes using jQuery & AJAX。

Answer 18

这就是我与二维数组：第一列是项目i，增加innerHTML的<option>。第二列是record_id i，添加到value的<option>：

1. PHP

   $items = $dal->get_new_items(); // Gets data from the database
   $items_arr = array();
   $i = 0;
   foreach ($items as $item)
   {
       $first_name = $item->first_name;
       $last_name = $item->last_name;
       $date = $item->date;
       $show = $first_name . " " . $last_name . ", " . $date;
       $request_id = $request->request_id;
       $items_arr[0][$i] = $show;
       $items_arr[1][$i] = $request_id;
       $i++;
   }
   
   echo json_encode($items_arr);
   

2. JavaScript/Ajax

           function ddl_items() {
               if (window.XMLHttpRequest) {
                   // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                   xmlhttp=new XMLHttpRequest();
               }
               else{
                   // Code for Internet Explorer 6 and Internet Explorer 5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
   
               xmlhttp.onreadystatechange=function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                   var arr = JSON.parse(xmlhttp.responseText);
                   var lstbx = document.getElementById('my_listbox');
   
                   for (var i=0; i<arr.length; i++) {
                       var option = new Option(arr[0][i], arr[1][i]);
                       lstbx.options.add(option);
                   }
               }
           };
   
           xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
           xmlhttp.send();
       }
   }
   

Answer 19

1. $.each比for循环慢
2. 每次,DOM选择都不是循环中的最佳实践 $("#mySelect").append();

所以最好的解决方案如下

如果JSON数据resp是

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

用它作为

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Answer 20

我发现这很简单而且效果很好。

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

Answer 21

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将如下所示:

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

Answer 22

虽然之前的答案都是有效的答案 - 最好先将所有这些答案附加到documentFragmnet,然后将该文档片段作为元素追加到......之后.

看John Resig关于此事的想法 ......

有点像:

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);

Answer 23

另一种方法:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

Answer 24

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只有一次.

Answer 25

您可以使用以下代码遍历json数组

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

Answer 26

JSON 格式：

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

以及在 Ajax 成功时将值填充到下拉列表的 jQuery 代码：

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
}