Question

这应该很容易但由于某种原因我无法在网上找到它的答案.. 我有一个在AJAX请求后收到的数组，我想在其内容中填充一个简单的下拉框。所以，让我们说这是我的阵列：

var workers = ["Steve", "Nancy", "Dave"];

我有一个简单的下拉框，我想根据AJAX调用得到的动态填充：

<div id='dropdown'>
  <select>
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
  </select>
</div>

我该怎么做呢？非常感谢!!

Answer 1

只需创建一个新的Jquery对象，然后将其附加到选择列表。如果你只选择一个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
}

Answer 2

如果你有这样的选择：

<div id='dropdown'>
   <select>
   </select>
</div>

您可以使用以下内容：

for(var i = 0; i < workers.length; i++) {
   $('#dropdown select').append('<option value='+i+'>'+workers[i]+'</option>');
}

Answer 3

如果您在下拉列表中始终有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]);
}

如果您也想更改选项数量，您可能希望删除所有现有选项并重新添加所有选项，如下所示：

var workers = ["Steve", "Nancy", "Dave"];
$("#dropdown select").empty();
for(var i in workers) {
  $("#dropdown select").append('<option value='+i+'>'+workers[i]+'</option>');
}

Answer 4

您必须遍历数组并通过在DOM上创建选项并设置其值来将选项添加到选择中。试试这个：

        var workers = ["Steve", "Nancy", "Dave"];
        $.each(workers,function(){
            var option = document.createElement('option');
            $('#dropdown select').append($(option).attr('value',this).html(this));
        });

Answer 5

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

$('#dropdown select').html( $.map(workers, function(i){
     return '<option value="' + i + '">'+ i + '</option>';
}).join('') );

Answer 6

您也可以尝试这样做。

它对我有用。

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

Jquery - 使用数组内容填充DropDown框

6 个答案: