Question

我在使用此方法使用数组中的选项填充我的选择菜单时出现问题

var adultAgesArr = ['18 - 20', '21 - 30', '31 - 40', '41 - 50', '51 - 60', '60 +'];
var $ageOptions = '';
$.each(adultAgesArr, function(index, value){
    $ageOptions += $('<option/>', {text: value});
})

之后

$('<select/>').append($ageOptions)

我得到的结果是

<select>
[Object object] [Object object] [Object object] [Object object] [Object object] [Object object]
</select>

Answer 1

你可以这样做：

$select = $('select');
$.each(adultAgesArr, function(index, value){
  $select.append($('<option/>', {text: value, value: value}));
})

在您将jQuery对象强制转换为字符串之前。我想这种方式，如果你事先缓存select，就同样有效。

DEMO

Answer 2

希望这会有所帮助：

<select id="menu"></select>

var populate = function() {
    var adultAgesArr = ['18 - 20', '21 - 30', '31 - 40', '41 - 50', '51 - 60', '60 +'],
    select = $('#menu')[0];

    $.each(adultAgesArr, function(index, value){
        var opt = document.createElement('option');
        opt.value = value;
        opt.innerHTML = value;
        select.appendChild(opt);
    });
}

populate();

Answer 3

创建选项而不是这样做：

 $ageOptions += $("< option/>", {text: value});

最好这样做：

 new Option("option text", "value")

然后追加。

使用数组中的选项填充选择菜单

3 个答案: