[英]How to create a Dynamic Bootstrap Multiselect
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 我试图动态地将每个选项添加到bootstrap multiselect,但它不能正常工作
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/
You need to use .multiselect('rebuild')
method of multiselect after you use .append()
使用
.append()
后,需要使用多.multiselect('rebuild')
方法
$('#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
});
});
You need to add 你需要添加
$('#chkveg').multiselect('rebuild');
to the end of your button click event to rebuild the multiselect. 在按钮单击事件结束时重建多重选择。
You can append
your list to bootstrap ul
and to your select
您可以
append
列表append
到bootstrap ul
和select
$('.multiselect-container').append(htm);
$('#chkveg').append(htm);
here is new Demo: http://jsfiddle.net/pL4hg76b/2/ 这是新的演示: http : //jsfiddle.net/pL4hg76b/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.