JS组件系列——两种bootstrap multiselect组件大比拼

柔情只为你懂 2022-07-13 02:53 323阅读 0赞

前言：今天继续来看看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]

Multiple-Select文档以及Demo：[http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh\_CN][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]

bootstrap-multiselect文档以及Demo：[http://davidstutz.github.io/bootstrap-multiselect/][http_davidstutz.github.io_bootstrap-multiselect]

## 二、Multiple-select组件 ##

### 1、组件说明 ###

这个组件需要的浏览器支持如下：

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

还好，一般主流的浏览器都能够支持。

### 2、效果预览 ###

（1）原始的MultiSelect

![459756-20151203101550611-1257265150.png][]

（2）初始化的Multiple Select

![459756-20151203101635111-1553128419.png][]

![459756-20151203101644158-1043163810.png][]

![459756-20151203101716049-824312717.png][]

（3）设置选中和禁用

![459756-20151203101729643-1073708252.png][]

（4）设置分组

![459756-20151203101733877-1378748690.png][]

（5）设置未选中的初始值：请选择

![459756-20151203101741814-849650794.png][]

（6）初始化成单选

![459756-20151203101803752-1156371521.png][]

（7）设置组件的筛选功能

![459756-20151203101809424-1774692866.png][]![459756-20151203101813486-78022368.png][]

### 3、代码示例 ###

既然是bootstrap的组件，肯定需要bootstrap的支持。我们来看看需要引用的js

![复制代码][copycode.gif]

@*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>

![复制代码][copycode.gif]

（1）原始的初始化

![复制代码][copycode.gif]

![复制代码][copycode.gif]

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

（2）设置选中和禁用

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

（3）设置分组和初始值

![复制代码][copycode.gif]

![复制代码][copycode.gif]

$(function () {
        
        $('#sel_search_orderstatus3').multipleSelect({
            placeholder: "请选择"
        });
    })

（4）单选

$(function () {
        
        $('#sel_search_orderstatus4').multipleSelect({
            placeholder: "请选择",
            single: true
        });
    })

（5）筛选

$(function () {
        
        $('#sel_search_orderstatus5').multipleSelect({
            placeholder: "请选择",
            filter: true
        });
    })

（6）更多参数：如果园友们有兴趣，可以看看源码里面的所有参数，虽然没有中文详解，但是根据英文的大概意思就能知道是干什么用的，如果你的multiple select不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

![459756-20151203104312830-1216684287.png][]

下面是博主从文档里面截选出来的一些自认为比较重要的参数说明：（转载至文档[http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh\_CN][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][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][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）最原始的样子

![459756-20151203111737518-1918405563.png][]![459756-20151203111748408-1700523789.png][]![459756-20151203111753518-1036899392.png][]

（2）单选

![459756-20151203111756924-784129883.png][]

（3）默认选中和禁用

![459756-20151203111800721-553854413.png][]

（4）分组折叠和展开

![459756-20151203111805518-756534675.png][]![459756-20151203111820049-793533555.png][]

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

![459756-20151203112138424-670982730.png][]![459756-20151203112145158-1132366545.png][]

（6）搜索过滤功能

![459756-20151203111838721-16714640.png][]![459756-20151203111844268-661308637.png][]

### 2、代码示例 ###

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

![复制代码][copycode.gif]

![复制代码][copycode.gif]

（1）最原始的初始化

![复制代码][copycode.gif]

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

（2）设置选中和禁用

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

（3）分组

![复制代码][copycode.gif]

![复制代码][copycode.gif]

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

其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。

## 四、总结 ##

以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭园友们自己的感觉，使用起来都挺简单，功能基本类似。[源码下载][Link 1]

[davidstutz]: https://github.com/davidstutz
[wenzhixin]: https://github.com/wenzhixin
[multiple-select]: https://github.com/wenzhixin/multiple-select
[http_wenzhixin.net.cn_p_multiple-select_docs_index.html_locale_zh_CN]: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN
[bootstrap-multiselect]: https://github.com/davidstutz/bootstrap-multiselect
[http_davidstutz.github.io_bootstrap-multiselect]: http://davidstutz.github.io/bootstrap-multiselect/
[459756-20151203101550611-1257265150.png]: /images/20220713/077fb8b66d1945acb807a9f00217ffa5.png
[459756-20151203101635111-1553128419.png]: /images/20220713/a11f269812a741bc9e5e985acad43a27.png
[459756-20151203101644158-1043163810.png]: /images/20220713/f9be4b78387849068456a155cf8b74a4.png
[459756-20151203101716049-824312717.png]: /images/20220713/124c154059fb46f3810cc0364c221e9e.png
[459756-20151203101729643-1073708252.png]: /images/20220713/8983aca1b0ad46d8aebe9fbeb98a8f73.png
[459756-20151203101733877-1378748690.png]: /images/20220713/f3cec29094ca492f9899c7eb0e9112e8.png
[459756-20151203101741814-849650794.png]: /images/20220713/27e01c0823144e4191fa7de5b22d95a1.png
[459756-20151203101803752-1156371521.png]: /images/20220713/e76d8d2bda404c4d960f5e1ce53e1c90.png
[459756-20151203101809424-1774692866.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203101809424-1774692866.png
[459756-20151203101813486-78022368.png]: /images/20220713/33c7eb7c3ae04ab4892a04af4740919d.png
[copycode.gif]: /images/20220713/ffcc6fbad3e741efb9c7e0410c58e837.png
[459756-20151203104312830-1216684287.png]: /images/20220713/fae3dc5073c9463fa54ed24dce454e4a.png
[459756-20151203111737518-1918405563.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203111737518-1918405563.png
[459756-20151203111748408-1700523789.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203111748408-1700523789.png
[459756-20151203111753518-1036899392.png]: /images/20220713/c42464a8b6ed40fba1f1f0528c2caecf.png
[459756-20151203111756924-784129883.png]: /images/20220713/742db67c88d442cb8d659e8cf7af3a3d.png
[459756-20151203111800721-553854413.png]: /images/20220713/7ca13741b1dc42a6be6d44b492b624fe.png
[459756-20151203111805518-756534675.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203111805518-756534675.png
[459756-20151203111820049-793533555.png]: /images/20220713/45c08445aa99424691cac79d5fa5c5be.png
[459756-20151203112138424-670982730.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203112138424-670982730.png
[459756-20151203112145158-1132366545.png]: /images/20220713/20a6c04d7d9a43e0a3fb269806557bdb.png
[459756-20151203111838721-16714640.png]: http://images2015.cnblogs.com/blog/459756/201512/459756-20151203111838721-16714640.png
[459756-20151203111844268-661308637.png]: /images/20220713/ac490db3f95f423e91628d21fb4ecd19.png
[Link 1]: http://pan.baidu.com/s/1hqubWIo