Question

我正在尝试使用Bootstrap multiselect，我使用了以下代码

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 multiselect但是它无法正常工作

此处的演示页面：http://jsfiddle.net/pL4hg76b/1/

但它的静态工作：http://jsfiddle.net/KyleMit/7yq7fvsq/

Answer 1

使用.append()

后，您需要使用 .multiselect('rebuild') 多选方法

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

<强> Updated 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
    });
});

Answer 2

您需要添加

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

到按钮点击事件的结尾，以重建多重选择。

Answer 3

您可append将您的列表引导至ul和select

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

这是新的演示：http://jsfiddle.net/pL4hg76b/2/

如何创建动态Bootstrap Multiselect

3 个答案: