使用jQuery追加將選項值添加到選擇元素不起作用

Question

我正在尋找使用存儲在數組中的項目名稱動態填充select元素。

由於某種原因，它無法正常工作，我不確定為什么。

HTML：

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

請注意，我正在使用引導程序進行布局。

這是我用來嘗試填充“ .select1”的jQuery

JQUERY：

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

請注意，函數“選擇”存儲在名為“顯示”的對象中。

state.greens是我嘗試訪問的數組的名稱。

因此，在我的html頁面末尾，我調用display.select（）;。 調用該函數。

控制台中未顯示任何錯誤消息。

另外，我看到了這個問題： 使用jQuery選擇附加選項不起作用

但是正在尋找以jquery為中心的答案，這似乎應該可行。

Answer 1

您可以通過以下方式進行操作：

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

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