动态创建引导选择选择器

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

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

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

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

如何动态创建引导选择？谢谢。

Answer 1

您需要在调用selectpicker() 之前将您创建的<select /> 附加到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 的删除 - 您已经在循环遍历对象的属性，因此方法调用是多余的。