bootstrap-multiselect 的簡單使用，樣式修改，動態創建option
1.bootstrap-multiselect 顧名思義基于bootstrap，bootstrap基于jquery,所以第一步，引入文件
bootstrap.css/ juery.js /bootstrap.js 引入此三個文件，是常用的就不貼出來了；
引入下面的兩個文件，如果沒有請去github下載：https://github.com/davidstutz/bootstrap-multiselect
<link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css"> <script type="text/javascript" src="bootstrap-multiselect.js"></script>
2.開始使用
<div style="width: 100%; margin:20px">
<select multiple="multiple" style="width:100%; ">
<option>一室一廳</option>
<option>兩室一廳</option>
<option>三室一廳</option>
</select>
</div>
這是一段都知道的代碼，我盡量說的簡便易懂；
$('select').multiselect();
不展開和展開的效果就在上面；這就是簡單的使用；
接下來我們來添加兩個配置：
$("select").multiselect({
buttonWidth:195, //選擇框的大小
includeSelectAllOption: true,//是否現實全選
});
看看效果：
可以看到源碼里面介紹，有許多的配置項，網上已經相應的關于每一個配置項的介紹，例如這一篇http://blog.csdn.net/fangzilixia/article/details/51265112 可以看看；
2.改變多選框的樣式；讓它變得好看點；
.multiselect-container{ /*下拉框的樣式*/
width:195px;
}
.multiselect-container>li>a>label{
line-height: 28px;
font-size: 12px;
}
.multiselect-container>li>a>label>input[type='checkbox'] {
margin-top: 7px;
}
.multiselect-item.multiselect-all.active{
border-bottom:1px solid #ccc !important;
}
/* .multiselect-container.dropdown-menu li{
width:49%;
display: inline-block;
}
.multiselect-container.dropdown-menu li:first-child{
width:100%;
} */
.multiselect.dropdown-toggle.btn.btn-default:link,.multiselect.dropdown-toggle.btn.btn-default:visited,.multiselect.dropdown-toggle.btn.btn-default:focus,.multiselect.dropdown-toggle.btn.btn-default:hover,.multiselect.dropdown-toggle.btn.btn-default:active, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{
background: #fff;
outline: none;
border:1px solid #ccc;
box-shadow: none;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
background: #474752;
}
.multiselect-selected-text{
font-size:13px;
font-family: '微軟雅黑','宋體';
width:100%;
float: left;
text-align: left;
}
.btn.btn-default{
padding-right:15px;
}
看看效果：
樣式就改到這；
3.動態添加option
將html的option去掉：
<div style="width: 100%; margin:20px">
<select multiple="multiple" name="companyIdStr" class="companyIdStr" style="width:100%; ">
</select>
</div>
法1：
function multiselect(obj) { //初始化方法
$(obj).multiselect({
includeSelectAllOption: true,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
buttonWidth: 195,
maxHeight: 300,
});
}
//動態創建option
function newOption(data, className) {
var option;
for (var i = 0; i < data.length; i++) {
if (data[i].selected) { //判斷是否要初始化時就選擇
option += '<option value="' + data[i].value + '" selected="' + data[i].selected + '">' + data[i].label + '</option>';
} else {
option += '<option value="' + data[i].value + '">' + data[i].label + '</option>';
}
}
$(className).html(option);//將內容顯示在復選框， $(className).append(option) 也是可以的;
multiselect(className);
}
var data = [{ value: '1', label: '一室一廳', selected: true }, { value: '2', label: '兩室一套' }, { value: '3', label: '兩室三套' }];
newOption(data, '.companyIdStr');
效果這樣，默認第一個可選；
法二：
$("select[name='companyIdStr']").multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableCollapsibleOptGroups: true,
buttonWidth:195, //選擇框的大小
includeSelectAllOption: true,
selectAllJustVisible:true,
//下拉回調函數
onDropdownShow: function (event) {
addOption();
},
});
function addOption(){
var data=[{value:'1',label:'一室一廳',selected:true},{value:'2',label:'兩室一套'}];
$("select[name='companyIdStr']").multiselect('dataprovider',data);
}
利用本身回調事件；
就是這樣，兩種辦法；
浙公網安備 33010602011771號