javascript - 使用 jquery追加将选项值添加到选择元素中不起作用

Question

我希望使用存储在数组中的项目名称动态填充选择元素。

由于某种原因它不起作用，我不确定为什么。

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

你可以这样做:

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