Question

我希望动态填充一个select元素，其中包含存储在数组中的项的名称。

出于某种原因，它不起作用，我不确定原因。

HTML：

<div class="col-md-4 col-md-offset-4">
    <select class="select1">
    </select>
        and
    <select class="select2">
    </select>
</div>

请注意，我正在使用bootstrap进行布局。

这是我用来尝试填充“.select1”

的jquery

JQUERY：

select: function() {
    $.each(state.greens, function(index, value) {
        $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>");
    });
}

请注意，“select”函数存储在名为“display”的对象中。

state.greens是我正在尝试访问的数组的名称。

所以在我的html页面的末尾，我调用display.select（）;调用该函数。

控制台中没有显示任何错误消息。

另外，我看到了这个问题：Appending options to select using jQuery doesn't work

但是正在寻找一个以jquery为中心的答案，这似乎应该有效。

Answer 1

你可以这样做：

Tips

Answer 2

当你附加时，你基本上是添加到容器的.innerHTML值。这适用于除<select>之外的大多数元素。您必须正确添加元素才能让DOM获取它：

var select=document.getElementById('select1');
var option=document.createElement('option');
option.setAttribute('value','option1');
option.innerHTML='Option 1';
select.appendChild(option);

使用jquery append将选项值添加到select元素中不起作用

2 个答案: