动态创建引导选择选择器

Question

我正在使用bootstrap select插件.我正在填充动态创建的选择,如下所示:

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,它没有识别我正在尝试创建的bootstrap selectpicker.我在同一页面上有一个我没有动态创建的选项,它工作正常.

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

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

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

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- 您已经循环遍历对象的属性,以便方法调用是多余的.