前言：今天繼續來看看bootstrap的另一個元件：multiselect。記得在項目開始之前，部落客項目組幾個同僚就使用哪些js元件展開過讨論，其中就說到了select元件，由于項目的整體風格使用的bootstrap風格，是以在選用select元件的時候優先考慮和bootstrap結合使用的。其中就找到了兩個這種元件，大體樣式和功能基本相同，經過一番讨論，項目組決定使用davidstutz的bootstrap-multiselect 元件，今天就來看看這兩個元件的用法。
1、第一個元件是寫bootstrap table的主人公wenzhixin封裝的一個元件——multiple-select。這個元件風格簡單、文檔全、功能強大。但是覺得它選中的效果不太好。關于它的效果展示，我們放在後面。還是給出對應的文檔API。
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、第二個元件也是在github上面找的——bootstrap-multiselect。這個元件風格和第一個非常相似，文檔也挺全面。
bootstrap-multiselect源碼首頁：https://github.com/davidstutz/bootstrap-multiselect
bootstrap-multiselect文檔以及Demo：http://davidstutz.github.io/bootstrap-multiselect/
這個元件需要的浏覽器支援如下：
IE 7+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+
還好，一般主流的浏覽器都能夠支援。
（1）原始的MultiSelect
（2）初始化的Multiple Select
（3）設定選中和禁用
（4）設定分組
（5）設定未選中的初始值：請選擇
（6）初始化成單選
（7）設定元件的篩選功能
既然是bootstrap的元件，肯定需要bootstrap的支援。我們來看看需要引用的js
（1）原始的初始化
（2）設定選中和禁用
（3）設定分組和初始值
（4）單選
（5）篩選
（6）更多參數：如果園友們有興趣，可以看看源碼裡面的所有參數，雖然沒有中文詳解，但是根據英文的大概意思就能知道是幹什麼用的，如果你的multiple select不想要預設的初始值，可以在初始化的時候去設定他們的值。如下是源碼裡面的預設參數清單。
下面是部落客從文檔裡面截選出來的一些自認為比較重要的參數說明：（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
類型: boolean
是否打開下拉清單。
預設值為 <code>false</code>。
類型: string
顯示預設的提示資訊。
預設值為 <code>''</code>。
是否顯示全選複選框。
預設值為 <code>true</code>。
全選複選框的顯示内容。
預設值為 <code>Select all</code>。
是否在一行中顯示多個選項。
類型: integer
一行中每個選項的寬度。
預設值為 <code>80</code>。
是否隻允許你選擇一行。
定義下拉清單的位置，隻能是 <code>bottom</code> 或者 <code>top</code>。
預設值為 <code>bottom</code>.
是否開啟過濾功能。
定義下拉清單的寬度。
預設值為 <code>undefined</code>。 預設與 select 的寬度相同。
下拉清單的最大高度。
預設值為 <code>250</code>。
（7）常用事件（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
當下拉清單被打開時觸發。
當下拉清單被關閉時觸發。
點選全選或者調用 “checkall” 方法時觸發。
點選全不選或者調用 “uncheckall” 方法時觸發。
點選分組時觸發。
點選一個複選框時觸發
（8）常用方法（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）
擷取 Multiple Select 選擇内容。
參數: type
選擇内容的類型，value 或者 text。
預設值為 <code>value</code>。
設定 Multiple Select 的内容。
參數: values
類型: array
選擇框的内容資訊。
啟用 Multiple Select。
禁用 Multiple Select。在這種模式下，不允許使用者操作。
全選所有的複選框。
全不選所有的複選框。
重新加載 Multiple Select。
假如你是通過 AJAX 或者 DOM 來手動添加或者删除 option 選項，可以通過 refresh 方法來重新加載 Multiple Select。
（1）最原始的樣子
（2）單選
（3）預設選中和禁用
（4）分組折疊和展開
（5）初始化控件選中和未選中的值
（6）搜尋過濾功能
初始化的過程和上面的類似，首先引用檔案。
（1）最原始的初始化
（3）分組
其他效果的代碼就不一一展示了，代碼很簡單，看看文檔基本沒啥問題。
以上就是兩種多選元件的效果展示以及簡單的代碼示例。至于哪種更好全憑園友們自己的感覺，使用起來都挺簡單，功能基本類似。源碼下載下傳