JS組件系列——兩種bootstrap multiselect組件大比拼

前言：今天繼續來看看bootstrap的另一個組件：multiselect。記得在項目開始之前，博主項目組幾個同事就使用哪些js組件展開過討論，其中就說到了select組件，由於項目的整體風格使用的bootstrap風格，所以在選用select組件的時候優先考慮和bootstrap結合使用的。其中就找到了兩個這種組件，大體樣式和功能基本相同，經過一番討論，項目組決定使用davidstutz的bootstrap-multiselect 組件，今天就來看看這兩個組件的用法。

一、組件說明以及API

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/

二、Multiple-select組件

1、組件說明

這個組件需要的瀏覽器支持如下：

• IE 7+
• Chrome 8+
• Firefox 10+
• Safari 3+
• Opera 10.6+

還好，一般主流的瀏覽器都能夠支持。

2、效果預覽

 （1）原始的MultiSelect

（2）初始化的Multiple Select

 

（3）設置選中和禁用

（4）設置分組

（5）設置未選中的初始值：請選擇

（6）初始化成單選

（7）設置組件的篩選功能

3、代碼示例

既然是bootstrap的組件，肯定需要bootstrap的支持。我們來看看需要引用的js

    @*Jquery*@
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    @*bootstrap*@
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    @*multiple-select*@
    <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
    <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

    @*頁面js*@
    <script src="~/Scripts/Home/Index_wenzhixin.js"></script>

（1）原始的初始化

 　　　　　　　　　　　　　 <label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
                                <option value="0">未排產</option>
                                <option value="5">已排產</option>
                                <option value="10">已鎖定</option>
                                <option value="25">在制</option>
                                <option value="20">訂單提交</option>
                                <option value="30">訂單刪除</option>
                                <option value="50">訂單報廢</option>
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus').multipleSelect();
})

（2）設置選中和禁用

　　　　　　　　　　　　　　<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
                               ......
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus2').multipleSelect();
})

（3）設置分組和初始值

　　　　　　　　　　　　　　<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
                                <optgroup label="未上線">
                                    <option value="0">未排產</option>
                                </optgroup>
                                <optgroup label="已上線">
                                    <option value="5">已排產</option>
                                    <option value="10">已鎖定</option>
                                    <option value="25">在制</option>
                                    <option value="20">訂單提交</option>
                                </optgroup>
                                <optgroup label="異常">
                                    <option value="30">訂單刪除</option>
                                    <option value="50">訂單報廢</option>
                                </optgroup>
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus3').multipleSelect({
        placeholder: "請選擇"
    });
})

（4）單選

　　　　　　　　　　　　　　<label class="control-label col-xs-1" for="sel_search_orderstatus4">單選</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
                                .......
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus4').multipleSelect({
        placeholder: "請選擇",
        single: true
    });
})

（5）篩選

　　　　　　　　　　　　　　<label class="control-label col-xs-1" for="sel_search_orderstatus5">篩選</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
                                ......
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus5').multipleSelect({
        placeholder: "請選擇",
        filter: true
    });
})

（6）更多參數：如果園友們有興趣，可以看看源碼里面的所有參數，雖然沒有中文詳解，但是根據英文的大概意思就能知道是干什么用的，如果你的multiple select不想要默認的初始值，可以在初始化的時候去設置他們的值。如下是源碼里面的默認參數列表。

下面是博主從文檔里面截選出來的一些自認為比較重要的參數說明：（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

• isOpen

類型: boolean

是否打開下拉列表。

默認值為 false。

• placeholder

類型: string

顯示默認的提示信息。

默認值為 ''。

• selectAll

類型: boolean

是否顯示全選復選框。

默認值為 true。

• selectAllText

類型: string

全選復選框的顯示內容。

默認值為 Select all。

• multiple

類型: boolean

是否在一行中顯示多個選項。

默認值為 false。

• multipleWidth

類型: integer

一行中每個選項的寬度。

默認值為 80。

• single

類型: boolean

是否只允許你選擇一行。

默認值為 false。

• position

類型: string

定義下拉列表的位置，只能是 bottom 或者 top。

默認值為 bottom.

• filter

類型: boolean

是否開啟過濾功能。

默認值為 false。

• width

類型: integer

定義下拉列表的寬度。

默認值為 undefined。 默認與 select 的寬度相同。

• maxHeight

類型: integer

下拉列表的最大高度。

默認值為 250。

（7）常用事件（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

• onOpen

當下拉列表被打開時觸發。

• onClose

當下拉列表被關閉時觸發。

• onCheckAll

點擊全選或者調用 “checkall” 方法時觸發。

• onUncheckAll

點擊全不選或者調用 “uncheckall” 方法時觸發。

• onOptgroupClick

點擊分組時觸發。

• onClick

點擊一個復選框時觸發

（8）常用方法（轉載至文檔http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

• getSelects

獲取 Multiple Select 選擇內容。

參數: type

類型: string

選擇內容的類型，value 或者 text。

默認值為 value。

• setSelects

設置 Multiple Select 的內容。

參數: values

類型: array

選擇框的內容信息。

• enable

啟用 Multiple Select。

• disable

禁用 Multiple Select。在這種模式下，不允許用戶操作。

• checkAll

全選所有的復選框。

$('select').multipleSelect('checkAll');

• uncheckAll

全不選所有的復選框。

$('select').multipleSelect('uncheckAll');

• refresh

重新加載 Multiple Select。

假如你是通過 AJAX 或者 DOM 來手動添加或者刪除 option 選項，可以通過 refresh 方法來重新加載 Multiple Select。

三、Bootstrap-multiselect組件

1、效果預覽

（1）最原始的樣子

 

（2）單選

（3）默認選中和禁用

（4）分組折疊和展開

（5）初始化控件選中和未選中的值

（6）搜索過濾功能

2、代碼示例

初始化的過程和上面的類似，首先引用文件。

　　 <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
    <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

    <script src="~/Scripts/Home/Index_davidstutz.js"></script>

（1）最原始的初始化

                        <label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
                                <option value="0">未排產</option>
                                <option value="5">已排產</option>
                                <option value="10">已鎖定</option>
                                <option value="25">在制</option>
                                <option value="20">訂單提交</option>
                                <option value="30">訂單刪除</option>
                                <option value="50">訂單報廢</option>
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus').multiselect();
});

（2）設置選中和禁用

　　　　　　　　　　　　　　<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
                                <option value="0">未排產</option>
                                <option value="5" selected="selected">已排產</option>
                                <option value="10" selected="selected">已鎖定</option>
                                <option value="25" disabled="disabled">在制</option>
                                <option value="20" disabled="disabled">訂單提交</option>
                                <option value="30" disabled="disabled" selected="selected">訂單刪除</option>
                                <option value="50">訂單報廢</option>
                            </select>
                        </div>

（3）分組

<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
                                <optgroup label="未上線">
                                    <option value="0">未排產</option>
                                </optgroup>
                                <optgroup label="已上線">
                                    <option value="5">已排產</option>
                                    <option value="10" selected="selected">已鎖定</option>
                                    <option value="25" disabled="disabled">在制</option>
                                    <option value="20">訂單提交</option>
                                </optgroup>
                                <optgroup label="異常">
                                    <option value="30">訂單刪除</option>
                                    <option value="50">訂單報廢</option>
                                </optgroup>
                            </select>
                        </div>

$(function () {
    $('#sel_search_orderstatus3').multiselect({
        enableCollapsibleOptGroups: true
    });
});

其他效果的代碼就不一一展示了，代碼很簡單，看看文檔基本沒啥問題。

四、總結

 以上就是兩種多選組件的效果展示以及簡單的代碼示例。至於哪種更好全憑園友們自己的感覺，使用起來都挺簡單，功能基本類似。源碼下載