如何创建一个动态的Bootstrap多选下拉列表

Question

我想使用Bootstrap多选功能，我使用了以下代码

html

<input type="text" id="addRow"/>
<input type="button" id="btn" value="Add"/>
<form id="form1">
   <div style="padding:20px">
     <select id="chkveg" multiple="multiple">
     </select>
   </div>
</form>

和脚本

$(function () {
    $('#btn').click(function () {
        var val = $("#addRow").val();
        var htm = '';
        htm += '<option>' + val + '</option>';
        $('#chkveg').append(htm);
    });
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
});

我试图动态地将每个选项添加到 Bootstrap 多选框中，但它不能正常工作。

演示页面在这里：http://jsfiddle.net/pL4hg76b/1/

但是静态地工作：http://jsfiddle.net/KyleMit/7yq7fvsq/

- Chithra Mohan

Answer 1

在使用.append()之后，您需要使用多选框的.multiselect('rebuild')方法。

$('#chkveg').multiselect('rebuild');

更新的 Fiddle

---

完整代码

$(function () {
    $('#btn').click(function () {
        var val = $("#addRow").val();
        var htm = '';
        htm += '<option>' + val + '</option>';
        $('#chkveg').append(htm);
        $('#chkveg').multiselect('rebuild');
    });
    $('#chkveg').multiselect({
        includeSelectAllOption: true
    });
});

- Shaunak D

---

有没有办法可以删除<options>中的现有数据？ - Mangesh Sathe

@MangeshSathe 我使用以下代码：$select.empty().append(options); $select.multiselect('rebuild'); - helenatxu

Answer 2

您需要添加

$('#chkveg').multiselect('rebuild');

在您的按钮单击事件结束时重新构建多选框。

- Jamie Dunstan

Answer 3

您可以将列表 append 到 Bootstrap 的 ul 和您的 select 中。

$('.multiselect-container').append(htm);
$('#chkveg').append(htm);

这里有一个新的演示：http://jsfiddle.net/pL4hg76b/2/

- Islam Zedan

---

不是一个好的实践。 - jcrv