專案開發中，需要用到多選下拉列表外掛，由於專案前端框架採用了bootstrap，因此自然選擇了bootstrap的元件。經瞭解其有兩組外掛：

1、第一個元件是寫bootstrap table的主人公 wenzhixin 封裝的一個元件——

筆者參考了“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);

$dom.multiselect().val([]).multiselect("refresh")

對於以上問題，第一組外掛似乎更人性化（未實踐，沒有發言權），粗略看了下，第一組外掛有個更好的地方在於，可以在一行中展示多組資料，需求促進實踐...