bootstrap-multiselect.js多选框 动态更新select里的数据

最近用bootstrap-multiselect做多选,需要动态刷新数据。尝试了集中网上的方式都不行,最后采用下面方式进行解决,参考的原文地址:http://www.lanlanwork.com/blog/?post=6424

bootstrap-multiselect动态加载数据,首先要引用bootstrap-multiselect.css和bootstrap-multiselect.js

<select id="demo" name="demo"  multiple></select>

JS代码

$("#demo").multiselect({
 // 自定义参数,按自己需求定义
 nonSelectedText : '--请选择--',
 inheritClass : true,
 maxHeight : 350,
 includeSelectAllOption : true,
 numberDisplayed : 5,
 //下拉回调函数 
 onDropdownShow : function(event) {
 $.ajax({
 url : "${ctx}/xx/xx",
 async : false,
 type : "get",
 dataType : "json",
 success : function(data) {
 var mark = new Array();
 for (var i = 0; i < data.length; i++) {
 mark.push({
 value : data[i].markId,
 label : data[i].markName
 
 });
 }
 $("#demo").multiselect('dataprovider', mark);
 }
 })
 },

 });

尝试的解决方法
1:

$('#demo').multiselect('destroy').multiselect('refresh');

2:

$.ajax({
 url : "${ctx}/xx/xx",
 async : false,
 type : "get",
 dataType : "json",
 success : function(data) {
			$("#demo").html("");  
            for (var i = 0; i < data.length; i++) {  
                $("#demo").append("<option value='" + data[i].value+ "'>" + data[i].label+ "</option>");  
            }  
            $("#demo").multiselect("destroy").multiselect({  
                // 自定义参数,按自己需求定义  
                nonSelectedText : '--请选择--',   
                maxHeight : 350,   
                includeSelectAllOption : true,   
                numberDisplayed : 5  
            });  
 }
 })

3:采用的方式同成功方案基本一直,只不过不是放在多选框的下拉事件中

$.ajax({
url : "${ctx}/xx/xx",
async : false,
type : "get",
dataType : "json",
success : function(data) {
var mark = new Array();
for (var i = 0; i < data.length; i++) {
mark.push({
value : data[i].markId,
label : data[i].markName

});
}
$("#demo").multiselect('dataprovider', mark);
}
})

4:采用单选框的集合遍历append option的方式更不行。

上面是我的尝试结果,其中不成功123不知道是不是我的操作问题,反正是没有成功。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读