Jquery - 用数组的内容填充下拉框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27431170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Populate DropDown box with contents of array
提问by Pavel Zagalsky
This supposed to be really easy but for some reason I cannot find an answer for it online.. I have an array that I receive after AJAX request and I want to populate its content a simple dropdown box. So let's say that's my array:
这应该很简单，但由于某种原因，我无法在网上找到答案。我有一个在 AJAX 请求后收到的数组，我想将其内容填充到一个简单的下拉框中。所以让我们说这是我的数组：
var workers = ["Steve", "Nancy", "Dave"];
And I have a simple dropdown box which I want to populate dynamically depending what I'll get from an AJAX call:
我有一个简单的下拉框，我想根据从 AJAX 调用中得到的内容动态填充它：
<div id='dropdown'>
<select>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
How can I do it properly? Thanks a lot!!
我怎样才能正确地做到这一点？非常感谢！！
采纳答案by TauterTwiggy
Simply create a new Jquery object then append it to the select list. Easier if you just give the select an id instead of the div above it.
只需创建一个新的 Jquery 对象，然后将其附加到选择列表中。如果你只给 select 一个 id 而不是它上面的 div 就更容易了。
for(var i=0; i< workers.length;i++)
{
//creates option tag
jQuery('<option/>', {
value: workers[i],
html: workers[i]
}).appendTo('#dropdown select'); //appends to select if parent div has id dropdown
}
回答by danielrw7
If you have the select like this:
如果你有这样的选择：
<div id='dropdown'>
<select>
</select>
</div>
You could use something like this:
你可以使用这样的东西：
for(var i = 0; i < workers.length; i++) {
$('#dropdown select').append('<option value='+i+'>'+workers[i]+'</option>');
}
回答by Byron Singh
If you always have 3 options in the dropdown you can simply change the values of the option:
如果下拉列表中始终有 3 个选项，则只需更改选项的值即可：
var workers = ["Steve", "Nancy", "Dave"];
for(var i in workers) {
$("#dropdown option").eq(i).html(workers[i]);
$("#dropdown option").eq(i).val(workers[i]);
}
If you want to change the number of options too, you may want to remove all existing options and re-add all of them, like this:
如果您也想更改选项数量，您可能需要删除所有现有选项并重新添加所有选项，如下所示：
var workers = ["Steve", "Nancy", "Dave"];
$("#dropdown select").empty();
for(var i in workers) {
$("#dropdown select").append('<option value='+i+'>'+workers[i]+'</option>');
}
回答by jpbourbon
You have to loop through the array and add the options to the select by creating them on the DOM and setting their values. Try this:
您必须遍历数组并将选项添加到选择中，方法是在 DOM 上创建它们并设置它们的值。尝试这个：
var workers = ["Steve", "Nancy", "Dave"];
$.each(workers,function(){
var option = document.createElement('option');
$('#dropdown select').append($(option).attr('value',this).html(this));
});
回答by Dr Fred
Using the $.map() function, you can do this in a more elegant way :
使用 $.map() 函数，您可以以更优雅的方式执行此操作：
$('#dropdown select').html( $.map(workers, function(i){
return '<option value="' + i + '">'+ i + '</option>';
}).join('') );
回答by Dulith De Costa
You can try like this as well.
你也可以这样试试。
It worked for me.
它对我有用。
// Declare the array you need
var workers = ["Steve", "Nancy", "Dave"];
// Make a default value to the drop down list. This will load before the for each append data. This acts as a default value.
$('#dropdown select').append('<option value="select" selected="selected">Select Names</option>');
// Using for each loop iterate the values in the array declared
$.each(workers, function (i, item) {
$('#dropdown select').append($('<option></option>', {
value: item,
html : item
}));
});
