组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。

2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似，文档也挺全面。

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

Bootstrap-multiselect组件

<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" />
 <form id="formSearch" class="form-horizontal">

                    <div class="form-group">

                        <label class="control-label col-xs-1">原始Select</label>

                        <div class="col-xs-2" style="margin-top:7px;">

                            <select style="width:150px" multiple="multiple">

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                <option value="" selected="selected">已排产</option>

                                <option value="" selected="selected">已锁定</option>

                                <option value="" disabled="disabled">在制</option>

                                <option value="" disabled="disabled">订单提交</option>

                                <option value="" disabled="disabled" selected="selected">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                </optgroup>

                                <optgroup label="已上线">

                                    <option value="">已排产</option>

                                    <option value="" selected="selected">已锁定</option>

                                    <option value="" disabled="disabled">在制</option>

                                    <option value="">订单提交</option>

                                </optgroup>

                                <optgroup label="异常">

                                    <option value="">订单删除</option>

                                    <option value="">订单报废</option>

                                </optgroup>

                            </select>

                        </div>

                    </div>

                    <div class="form-group">

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

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

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

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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_orderstatus6" style="width:150px" multiple="multiple">

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                    </div>

                </form>
$(function () {

    $('#sel_search_orderstatus').multiselect();

    $('#sel_search_orderstatus2').multiselect();

    $('#sel_search_orderstatus3').multiselect({

        enableCollapsibleOptGroups: true

    });

    $('#sel_search_orderstatus4').multiselect();

    $('#sel_search_orderstatus5').multiselect({

        enableFiltering: true

    });

    $('#sel_search_orderstatus6').multiselect({

        nonSelectedText: '多项选择',

        nSelectedText: '项',

        allSelectedText: '所有项',

        selectAllText: '所有项'

    });

});

效果：

multiple-select组件：

@*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" />
  <div class="panel-body" style="padding:0px;">

        <div class="panel panel-default">

            <div class="panel-heading">查询条件</div>

            <div class="panel-body">

                <form id="formSearch" class="form-horizontal">

                    <div class="form-group">

                        <label class="control-label col-xs-1">原始Select</label>

                        <div class="col-xs-2" style="margin-top:7px;">

                            <select style="width:150px" multiple="multiple">

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                <option value="" selected="selected">已排产</option>

                                <option value="" selected="selected">已锁定</option>

                                <option value="" disabled="disabled">在制</option>

                                <option value="" disabled="disabled">订单提交</option>

                                <option value="" disabled="disabled" selected="selected">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                        <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="">未排产</option>

                                </optgroup>

                                <optgroup label="已上线">

                                    <option value="">已排产</option>

                                    <option value="">已锁定</option>

                                    <option value="">在制</option>

                                    <option value="">订单提交</option>

                                </optgroup>

                                <optgroup label="异常">

                                    <option value="">订单删除</option>

                                    <option value="">订单报废</option>

                                </optgroup>

                            </select>

                        </div>

                    </div>

                    <div class="form-group">

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

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

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

                                <option value="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</option>

                            </select>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>
$(function () {

    $('#sel_search_orderstatus').multipleSelect();

    $('#sel_search_orderstatus2').multipleSelect();

    $('#sel_search_orderstatus3').multipleSelect({

        placeholder: "请选择"

    });

    $('#sel_search_orderstatus4').multipleSelect({

        placeholder: "请选择",

        single: true

    });

    $('#sel_search_orderstatus5').multipleSelect({

        placeholder: "请选择",

        filter: true

    });

})

组件效果：

比较重要的参数说明：

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

常用事件：

  • onOpen

当下拉列表被打开时触发。

  • onClose

当下拉列表被关闭时触发。

  • onCheckAll

点击全选或者调用 “checkall” 方法时触发。

  • onUncheckAll

点击全不选或者调用 “uncheckall” 方法时触发。

  • onOptgroupClick

点击分组时触发。

  • onClick

点击一个复选框时触发

常用方法：

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

Bootstrap-select多选下拉框实现 ：http://www.cnblogs.com/anny0404/p/5329960.html

jQuery multiselect： http://loudev.com/

JS组件系列——Bootstrap Select2组件 （http://www.tuicool.com/articles/nYVn22e）

一、组件说明以及API说明

Select2使用示例地址： https://select2.github.io/examples.html

Select2参数文档说明： https://select2.github.io/options.html

Select2源码： https://github.com/select2/select2

bootstrap multiselect两大组件的更多相关文章

  1. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

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

    前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...

  3. web 前端常用组件【03】Bootstrap Multiselect

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...

  4. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  5. Java轻量级业务层框架Spring两大核心IOC和AOP原理

    IoC(Inversion of Control): IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些 ...

  6. bootstrap学习之二-组件

    一.bootstrap字体图标 以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...

  7. Bootstrap中的 Typeahead 组件

    Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...

  8. Flask框架简介，常用扩展包及两大核心

    Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...

  9. 通过微信Android和iOS版，看两大系统的差异

    由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...

随机推荐

  1. nyoj 712 探 寻 宝 藏--最小费用最大流

    问题 D: 探 寻 宝 藏 时间限制: 1 Sec  内存限制: 128 MB 题目描述 传说HMH大沙漠中有一个M*N迷宫,里面藏有许多宝物.某天,Dr.Kong找到了迷宫的地图,他发现迷宫内处处有 ...

  2. 前端mock数据之mockjax和mockjson

    用处 在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中 ...

  3. PHP使用CURL实现对带有验证码的网站进行模拟登录的方法

    网上的很多模拟登录程序,大都是通过服务程序apache之类的运行,获取到验证码之后显示在网页上,然后填上再POST出去,这样虽然看起来很友 好,但是既然模拟登录,登录后所干的事情就不一定是短时间完成的 ...

  4. ZBrush中的Clip剪切笔刷怎么快速运用

    Clip剪切笔刷可以对模型网格进行剪切操作,也可以叫做剪切笔刷.接下来看一下Clip切割笔刷在ZBrush中是如何使用的. 查看更多内容请直接前往:http://www.zbrushcn.com/ji ...

  5. hdu 5861 Road 两棵线段树

    传送门:hdu 5861 Road 题意: 水平线上n个村子间有 n-1 条路. 每条路开放一天的价格为 Wi 有 m 天的操作,每天需要用到村子 Ai~Bi 间的道路 每条路只能开放或关闭一次. ( ...

  6. [转载]ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)     本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事 ...

  7. React 之 Hello world

    一入react深似海,从此学习为常态,react 成为了一种趋势,很多人应该很多人准备进坑,下面对react进行简单的描述: 首先学习react,要有多方学习的准备,例如:Webpack, Babel ...

  8. MySQL数据库学习笔记（六）----MySQL多表查询之外键、表连接、子查询、索引

    本章主要内容: 一.外键 二.表连接 三.子查询 四.索引 一.外键: 1.什么是外键 2.外键语法 3.外键的条件 4.添加外键 5.删除外键 1.什么是外键: 主键:是唯一标识一条记录,不能有重复 ...

  9. Colorable Fantasy UI

    Colorable Fantasy UI URL:https://www.assetstore.unity3d.com/#/content/7563 环境要求 Requires Unity 4.0.1 ...

  10. linux强制用户下线

    Linux系统为多用户多任务系统,因此允许多个用户登录到系统,有时候,我们需要强制某些用户下线. 前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图 [root@vm ...