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


当前回答

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

其他回答

使用$.map()函数,可以以更优雅的方式执行此操作:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

实际上,为了获得更好的性能,最好单独制作选项列表并附加到选择id。

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

http://learn.jquery.com/performance/append-outside-loop/

这就是我对二维数组所做的:第一列是项I,添加到<option>的innerHTML。第二列是record_id i,添加到<option>的值:

PHP文件$items=$dal->get_new_items();//从数据库获取数据$items_arr=数组();$i=0;foreach($items作为$item){$first_name=$item->first_name;$last_name=$item->last_name;$date=$item->date;$show=$first_name。" " . $姓氏。", " . $日期$request_id=$request->request_id;$items_arr[0][$i]=$show;$items_arr[1][$i]=$request_id;$i++;}echo json_encode($items_arr);JavaScript/Ajax函数ddl_items(){if(window.XMLHttpRequest){//Internet Explorer 7+、Firefox、Chrome、Opera和Safari的代码xmlhttp=new XMLHttpRequest();}其他{//Internet Explorer 6和Internet Explorer 5的代码xmlhttp=新ActiveXObject(“Microsoft.xmlhttp”);}xmlhttp.onreadystatechange=函数(){如果(xmlhttp.readyState==4&&xmlhttp.status==200){var arr=JSON.parse(xmlhttp.responseText);var lstbx=document.getElementById('my_listbox');对于(变量i=0;i<arr.length;i++){var option=新选项(arr[0][i],arr[1][i]);lstbx.options.add(选项);}}};xmlhttp.open(“GET”,“Code/GET_items.php?dummy_time=”+new Date().getTime()+“”,true);xmlhttp.send();}}

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

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
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一次。