与其他答案相同，以jQuery的方式：

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

上面的响应也是可以接受的，但是为了更好的性能，尽可能少的修改DOM总是好的。

因此，与其在循环中添加每个项目，不如在循环中收集项目并在完成后追加它。

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

附加它，

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

甚至更好

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

如果您不必支持旧的IE版本，使用#0构造函数显然是要走的路，可读且高效的解决方案：

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

它在功能上等同于，但比：

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

var output = [];
$.each(selectValues, function(key, value){output.push('<option value="'+ key +'">'+ value +'</option>');});
$('#mySelect').html(output.join(''));

通过这种方式，您只“触摸DOM”一次。

<罢工>我不确定最新的行是否可以转换为$（'#my选择'）. html（output.join ('')) 因为我不知道jQuery内部（也许它在html（）方法中做了一些解析）

 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

这看起来更好，提供易读性，但比其他方法慢。

$.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(''));

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.NETMVC和jQuery的动态列表的完整文章，请访问：

使用MVC和jQuery的动态选择列表

简单的方法是：

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

这是稍微更快和更干净。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><select id="mySelect"></select>

有一种使用Microsoft模板方法的方法，目前正在提议将其包含到jQuery核心中。使用模板更强大，因此对于最简单的场景，它可能不是最佳选择。有关更多详细信息，请参阅斯科特·古概述功能的帖子。

首先包括模板js文件，可从github获得。

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

接下来设置一个模板

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

然后使用您的数据调用.渲染（）方法

var someData = [{ Text: "one", Value: "1" },{ Text: "two", Value: "2" },{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");

我已经更详细地博客了这种方法。

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

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

大多数其他答案使用each函数来迭代selectValues。这需要为每个元素调用append，并在单独添加每个元素时触发重排。

将此答案更新为更惯用的函数方法（使用现代JS）可以形成为只调用append一次，使用地图和Option元素构造函数创建option元素数组。

使用Option DOM元素应该可以减少函数调用开销，因为option元素在创建后不需要更新，jQuery的解析逻辑也不需要运行。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

如果您创建一个工厂实用函数来新建一个选项对象，这可以进一步简化：

const newoption = (...args) => new Option(...args)

然后可以直接提供给map：

$('mySelect').append($.map(selectValues, newoption))

以前的配方

因为append还允许将值作为可变数量的参数传递，所以我们可以预先创建option元素地图的列表，并使用apply将它们作为参数附加到单个调用中。

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

看起来在jQuery的更高版本中，append也接受数组参数，这可以稍微简化：

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

可以在这里找到一个jQuery插件：使用jQuery和AJAX自动填充选择框。

jQuery

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

Vanilla JavaScript

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

请注意……我在Android 2.2（Cyangen 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);

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

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

这就是我对二维数组所做的：第一列是项目i，添加到<option>的innerHTML。第二列是record_idi，添加到<option>的value：

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 Safarixmlhttp=new XMLHttpRequest();}else{// Code for Internet Explorer 6 and Internet Explorer 5xmlhttp=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();}}

此解决方案在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));});

虽然前面的答案都是有效的答案-建议先将所有这些附加到一个documents entFragrnet，然后将该文档片段作为元素附加到…

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

对旧@joshperry的回答的改进：

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

$("#mySelect").append($.map(selectValues, function(v,k){
return $("<option>").val(k).text(v);}));

或更短，

$("#mySelect").append($.map(selectValues, (v,k) => $("<option>").val(k).text(v))// $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS);

还有另一种方法：

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

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一次。

所有这些答案看起来都不必要的复杂。所有你需要的是：

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

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

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

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

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

与其到处重复相同的代码，我建议编写自己的jQuery函数更可取，例如：

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

然后要添加一个选项，只需执行以下操作：

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

JSON格式：

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

以及将值填充到Dropdown on Ajax成功的jQuery代码：

success: function(json) {var options = [];$('#org_category').html('');  // Set the Dropdown as Blank before new Dataoptions.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}

使用$. map（）函数，您可以以更优雅的方式执行此操作：

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

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

<!DOCTYPE html><html lang="en"><head><title>append selectbox using jquery</title><meta charset="utf-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">function setprice(){var selectValues = { "1": "test 1", "2": "test 2" };$.each(selectValues, function(key, value) {$('#mySelect').append($("<option></option>").attr("value",key).text(value));});
}</script></head><body onload="setprice();">

<select class="form-control" id="mySelect"><option>1</option><option>2</option><option>3</option><option>4</option></select>

</body></html>

将您的超文本标记语言选择id设置为下面的行。在这里mySelect用作选择元素的id。

   var options = $("#mySelect");

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

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

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

例如。

"1"："测试用例1"，"2"："测试用例2"，

下拉，

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

我决定加入一点。

1. 处理先前选择的选项；当我们附加时，一些浏览器会混乱
2. 只使用append命中DOM一次
3. 处理multiple属性，同时添加更多选项
4. 演示如何使用一个对象
5. 显示如何使用对象数组进行映射

// objects as value/desclet selectValues = {"1": "test 1","2": "test 2","3": "test 3","4": "test Four"};//use div here as using "select" mucks up the original selected value in "mySelect"let opts = $("<div />");let opt = {};$.each(selectValues, function(value, desc) {opts.append($('<option />').prop("value", value).text(desc));});opts.find("option").appendTo('#mySelect');
// array of objects called "options" in an objectlet selectValuesNew = {options: [{value: "1",description: "2test 1"},{value: "2",description: "2test 2",selected: true},{value: "3",description: "2test 3"},{value: "4",description: "2test Four"}]};
//use div here as using "select" mucks up the original selected valuelet opts2 = $("<div />");let opt2 = {}; //only append after adding all options$.map(selectValuesNew.options, function(val, index) {opts2.append($('<option />').prop("value", val.value).prop("selected", val.selected).text(val.description));});opts2.find("option").appendTo('#mySelectNew');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><select id="mySelect"><option value="" selected="selected">empty</option></select>
<select id="mySelectNew" multiple="multiple"><option value="" selected="selected">2empty</option></select>

实际上，为了获得更好的性能，最好单独制作选项列表并附加到选择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/

由于JQuery的append可以将数组作为参数，我很惊讶没有人建议将其作为map的一行代码

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

或reduce

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

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

const selectValues = {"1": "test 1","2": "test 2"}const selectTest = document.getElementById('selectTest')Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))

<select id="selectTest"></select>

纯js

在纯JS中添加下一个选项来选择更容易，更直接

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

let selectValues = { "1": "test 1", "2": "test 2" };
for(let key in selectValues) {mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;}

<select id="mySelect"><option value="0" selected="selected">test 0</option></select>

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