jquery - 动态创建 Bootstrap 选择选择器

Question

我正在使用bootstrap select plugin 。我正在填充动态创建的选择，如下所示:

var select = $('<select/>', {
     'class':"selectpicker"
}).selectpicker();

for (var idx in data) {
    if (data.hasOwnProperty(idx)) {
        select.append('<option value=' + data[idx].id+ '>' + data[idx].Text+ '</option>');
    }
}

select.selectpicker('refresh');

数据很好并且创建了一个选择，它无法识别我正在尝试创建的 Bootstrap 选择选择器。我在同一页面上有一个选择，我不是动态创建的，它工作正常。

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

$('.selectpicker').selectpicker();

如何动态创建 Bootstrap 选择？谢谢。

Answer 1

您需要附加 <select />在调用 selectpicker() 之前创建 DOM在它上面，像这样:

var $select = $('<select/>', {
     'class':"selectpicker"
});
for (var idx in data) {
    $select.append('<option value=' + data[idx].id + '>' + data[idx].Text + '</option>');
}

$select.appendTo('#myElement').selectpicker('refresh');

注意 append() 的使用，并删除 hasOwnProperty - 您已经在循环访问对象的属性，因此方法调用是多余的。