如何创建一个Dynamic Bootstrap Multiselect [英] How to create a 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 code

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/

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 Fiddle

---

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

这篇关于如何创建一个Dynamic Bootstrap Multiselect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！