?目錄:

bootstrap-multiselect從后臺加載數據

bootstrap-multiselect從本地加載數據渲染數據

將本地數據轉換成option html填充select 然后調用multiselect方法

使用API dataprovider選項

1、bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我們一般用來請求后臺返回具有label和text對象的json數組即可渲染。

來看下一般的效果

代碼:

$("#example-multi1").multiselect({url:path+"/admin/demo/operdata/data.json",numberDisplayed: 100,includeSelectAllOption: true,selectAllText: '選擇全部',enableFiltering: true,buttonWidth: '100%',maxHeight: 300,onDropdownHide:function(){var ids="";var texts = '';var values = '';$('#example-multi1 option:selected').each(function() {texts += $(this).text() + ', ';values+=$(this).val() + ', ';ids+=$(this).attr("id");});}});
當然還有更豐富的展示方式和事件回調可以參照API。

2、如果我們是加載本地js中的數據呢？

有2種方式

第一種方式將本地數據轉化成 <option></option>這樣的html字符串插入到select中然后一樣的調用multiselect方法。

這樣的方式可以實現，但是感覺太low，我想官方肯定有更好的辦法，故到官網找到了相應的API,就是第二種方法。

第二種方法使用官方提供的dataprovider選項

代碼:

$("#example-multi1").multiselect({//url:path+"/admin/demo/operdata/data.json",numberDisplayed: 100,includeSelectAllOption: true,selectAllText: '選擇全部',enableFiltering: true,buttonWidth: '100%',maxHeight: 300,onDropdownHide:function(){var ids="";var texts = '';var values = '';$('#example-multi1 option:selected').each(function() {texts += $(this).text() + ', ';values+=$(this).val() + ', ';ids+=$(this).attr("id");});}});var dataArr = [{label:'AAA',value:'aaa'},{label:'BBB',value:'bbb'}];$("#example-multi1").multiselect('dataprovider',dataArr);

注意加載數據的$("#example-multi1").multiselect('dataprovider',dataArr);要放在配置該select其他后面不然其他的選項樣式運用不上。

看下效果：

總結

以上是生活随笔為你收集整理的bootstrap-multiselect加载本地数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。