动态创建Bootstrap选择器选取器

Question

动态创建Bootstrap选择器选取器

6

我正在使用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');

数据是正确的，已经创建了一个选择器，但它无法识别我尝试创建的 Bootstrap selectpicker。在同一页上我还有一个静态创建的选择器，它可以正常工作。

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

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

如何动态创建Bootstrap下拉框？谢谢。

- BoundForGlory

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

你需要在调用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的方法 - 由于您已经在循环遍历对象的属性，因此该方法调用是多余的。