如何创建一个Dynamic Bootstrap Multiselect

本文介绍了如何创建一个Dynamic Bootstrap Multiselect的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我试图使用Bootstrap multiselect，我使用了下面的代码： html < input type =textid =addRow/> < input type =buttonid =btnvalue =Add/> < form id =form1> < div style =padding：20px> < select id =chkvegmultiple =multiple> < / select> < / div> < / form> 和脚本 $（'＃btn'）。click（function（）{ var val = $（＃addRow）。val（）; var htm =''; htm + ='< option>'+ val +'< / option>'; $（'＃chkveg'）。append（htm）; }）; $（'＃chkveg'）。multiselect（{ includeSelectAllOption：true }）; }）; 我尝试将每个选项动态添加到引导多选，但其工作不正常 演示页面： http://jsfiddle.net/pL4hg76b/1 / 但其静态工作方式为： http ：//jsfiddle.net/KyleMit/7yq7fvsq/ 解决方案您需要使用 .multiselect（'rebuild'） 在使用 .append（） $（ '＃chkveg'）多选（ '重建'）。 更新小提琴 完整代码 $（function（）{ $（'＃btn'）。click（function（）{ var val = $（＃addRow）。val（）; var htm =''; htm + ='< option>'+ val +'< / option> '; $（'＃chkveg'）。append（htm）; $（'＃chkveg'）。multiselect（'rebuild'）; }）; $ （'#chkveg'）。multiselect（{ includeSelectAllOption：true }）; }）; I am trying to use Bootstrap multiselect , I used the following codehtml<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 properlyDemo page here : http://jsfiddle.net/pL4hg76b/1/But its working statically : http://jsfiddle.net/KyleMit/7yq7fvsq/ 解决方案 You need to use .multiselect('rebuild') method of multiselect after you use .append()$('#chkveg').multiselect('rebuild');Updated FiddleFull 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 });}); 这篇关于如何创建一个Dynamic Bootstrap Multiselect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！