項目開發中，需要用到多選下拉列表插件，由於項目前端框架採用了bootstrap，因此自然選擇了bootstrap的組件。經瞭解其有兩組插件：
1、第一個組件是寫bootstrap table的主人公 wenzhixin 封裝的一個組件—— multiple-select 。這個組件風格簡單、文檔全、功能強大。
Multiple-Select源碼主頁： https://github.com/wenzhixin/multiple-select
Multiple-Select文檔以及Demo： http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
2、第二個組件：bootstrap-multiselect 。這個組件風格和第一個非常相似，文檔也挺全面。
bootstrap-multiselect源碼主頁： https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文檔以及Demo： http://davidstutz.github.io/bootstrap-multiselect/
筆者參考了“http://www.tuicool.com/articles/ANn2qa3”這篇文章進行初步瞭解。
在開發實踐中，我使用了第2個組件：bootstrap-multiselect，對於第一組插件並未嘗試實踐。參考bootstrap-multiselect的api，使用起來還算順利，常規用到以下屬性：
var multiSelectOption={
maxHeight:300,
numberDisplayed:3,
optionClass: function(element) {
var value = $(element).parent().find($(element)).index();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
},
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: true
};
<select class= "form-control myOwnDll"><option></option>...</select>
筆者數據源從後臺動態獲取效果如下圖：
根據頁面排版想要控制其寬度自定義，因此給select標籤設置寬度屬性width，發現怎麼也不生效，後來查看源碼才發現，本插件是將select插件隱藏，在其下方生成了一組新標籤用來呈現多選下拉樣式（template）。因此要面臨的第一個問題便是：自定義該多選下拉框的寬度。該寬度涉及三方面：btn組、顯示選中結果span、下拉容器ul。爲了能夠控制到生成的多選下拉框組件，因此需要再包一層div：
<div class="myOwnDdl">
<select class= "form-control"></select>
</div>然後通過添加以下css樣式類可有效控制多選下拉框的寬度：
/*自定義寬度*/
.myOwnDdl{
display:inline-block;
width:40%;
}
/* 實現寬度自定義 */
.myOwnDdl .btn-group{
width:100%;
}
.myOwnDdl .multiselect {
width:100%;
text-align:right;
margin-top:-5px;
}
.myOwnDdl ul {
width:100%;
}
.myOwnDdl .multiselect-selected-text {
position:absolute;
left:0;
right:25px;
text-align:left;
padding-left:20px;
}
/*控制隔行換色*/
.myOwnDll .multiselect-container li.odd {
background: #eeeeee;
}效果圖如下：
即：使用時，在其上再包一層樣式類包含myOwnDdl的div，則多選下拉列表即可與myOwnDdl容器的定義寬度一致。
繼續開發，遇到另一需求：某些條件下，控制下拉列表可多選，某些條件下控制其爲單選。
因此便開始找設置單選屬性，根據api馬上找到multiple屬性，於是嘗試：
$dom.multiselect({multile:false});
並沒有任何效果，後來查看源碼得知，本控件的單選及多選控制，是通過標籤的multiple屬性控制的，如果標籤中有multiple屬性，則爲多選，否則爲單選，本需求中需要將已經初始化爲多選的下拉列表改爲單選，如果將已有控件刪除，重新添加再重新綁定數據源初始化，似乎代價有些大，就像讓你給已有的房子加蓋一間衛生間，而你的方式是拆了房子重新蓋一樣。對於已有插件，果真不能瞎琢磨，還是多看看官方文檔，於是發現了.multiselect('destroy')，原理差不多，但性能上要好多了，因此通過以下方案實現多選變更爲單選：
if($conditionDom.val()==="equals"||$conditionDom.val()==="not_equals"){
$dllDom.removeAttr("multiple");
}else{
$dllDom.attr("multiple","multiple");
}
$dllDom.multiselect("destroy").multiselect(multiSelectOption);本次實踐，遇到的問題總結大概就這麼多了，另外在綁定值或清空時，僅val([])未生效（本賦值方式需使用數組），需要再執行refresh才生效：
$dom.multiselect().val([]).multiselect("refresh")
對於以上問題，第一組插件似乎更人性化（未實踐，沒有發言權），粗略看了下，第一組插件有個更好的地方在於，可以在一行中展示多組數據，需求促進實踐...