twitter-bootstrap 如何创建动态引导程序多选
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30300621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a Dynamic Bootstrap Multiselect
提问by Chithra Mohan
I am trying to use Bootstrap multiselect , I used the following code
我正在尝试使用 Bootstrap multiselect ，我使用了以下代码
html
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>
and script
和脚本
$(function () {
$('#btn').click(function () {
var val = $("#addRow").val();
var htm = '';
htm += '<option>' + val + '</option>';
$('#chkveg').append(htm);
});
$('#chkveg').multiselect({
includeSelectAllOption: true
});
});
i am try to add each option dynamically to the bootstrap multiselect but its not working properly
我尝试将每个选项动态添加到引导程序多选，但它无法正常工作
Demo page here : http://jsfiddle.net/pL4hg76b/1/
演示页面在这里：http: //jsfiddle.net/pL4hg76b/1/
But its working statically : http://jsfiddle.net/KyleMit/7yq7fvsq/
但它是静态工作的：http: //jsfiddle.net/KyleMit/7yq7fvsq/
回答by Shaunak D
You need to use .multiselect('rebuild')method of multiselect after you use .append()
使用.multiselect('rebuild')后需要使用多选方法.append()
$('#chkveg').multiselect('rebuild');
Full code
完整代码
$(function () {
$('#btn').click(function () {
var val = $("#addRow").val();
var htm = '';
htm += '<option>' + val + '</option>';
$('#chkveg').append(htm);
$('#chkveg').multiselect('rebuild');
});
$('#chkveg').multiselect({
includeSelectAllOption: true
});
});
回答by Jamie Dunstan
You need to add
你需要添加
$('#chkveg').multiselect('rebuild');
to the end of your button click event to rebuild the multiselect.
到按钮单击事件的末尾以重建多选。
回答by Islam Zedan
You can appendyour list to bootstrap uland to your select
你可以append将你的列表引导ul到你的select
$('.multiselect-container').append(htm);
$('#chkveg').append(htm);
here is new Demo: http://jsfiddle.net/pL4hg76b/2/
这是新的演示：http: //jsfiddle.net/pL4hg76b/2/
