multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法。

使用方法:

1、引用 multiSelect.css及 multiSelect.js。

下载地址 http://loudev.com/

2、因为 multiSelect 是基于jquery开发的一款插件,所以在使用之前必须要引用jquery 1.8以上版本。

3、html代码中必须含有 multiple="multiple"
 <select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem </option>
<option value='elem_2'>elem </option>
<option value='elem_3'>elem </option>
<option value='elem_4'>elem </option>
</select>

4、js

$("#my-select").multiselect({
header: true,
height: 200,
minWidth: 200,
selectedList: 9999,
hide: [ "explode", 500 ],
noneSelectedText: "==请选择==",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList:4
close: function ()
{
}
});

5、参数

名称 类型 默认值 描述
afterInit function function(container){} 在multiSelect启动后调用的函数
afterSelect function function(values){} 选择一个元素后调用的方法。
afterDeselect function function(values){} 取消一个元素后调用的方法。
selectableHeader HTML/Text null 可选择的列表的标题
selectionHeader HTML/Text null 被选择的列表的标题
selectableFooter HTML/Text null 可选择的列表的页脚
selectionFooter HTML/Text null 被选择的列表的页脚
disabledClass String 'disabled' 禁用元素的css类
selectableOptgroup Boolean false 当设置为true时会选择所有的选项
keepOrder Boolean false 筛选
dblClick Boolean false 替换默认点击事件,通过dblclick选择项目
cssClass String "" 将自定义CSS类添加到多选择容器。

6、效果图

          

multiSelect 下拉多选插件的更多相关文章

  1. jquery 下拉多选插件

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用 Chosen 替代样式表 Bootstrap Chosen

  2. 我的第一个jquery插件:下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  3. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  4. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  5. Jqure实现下拉多选

    Web ")                 {                     try                     {                          ...

  6. Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

    datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3   需求场景 如下,在datagri ...

  7. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  8. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. angular2.x 下拉多选框选择组件

    angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云   链接: ...

随机推荐

  1. PHP扩展之多线程

    PHP一直以为不支持多线程,后面才知道有基于pThread的扩展包,地址如下: http://php.net/manual/zh/book.pthreads.php 我感兴趣的是以下几个点: 1.Th ...

  2. printf 格式化输出

    i,d   十进制整数 x,X    十六进制无符号整数 o       八进制无符号整数 u       无符号十进制整数 c       单一字符 s       字符串 e E    指数形式浮 ...

  3. [JQuery]JQuery选择器引擎Sizzle

    写代码过程中,发现使用JQuery选择器时,$('div.tooltip')和$('.tooltip')的结果不一样,怀疑和选择器的代码逻辑有关(事后证明是代码的低级错误,但是从查找原因的过程中,学到 ...

  4. pwnable.kr-collision -Writeup

    bof html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,addres ...

  5. CoreImage-python截取核心图片

    去年项目中用到的图片截取,所以使用python写了一个,分享给大家,欢迎批评指正. github地址:https://github.com/george518/CoreImage 作用 核心图片:是指 ...

  6. mysql共享锁与排他锁

    mysql锁机制分为表级锁和行级锁,本文就和大家分享一下我对mysql中行级锁中的共享锁与排他锁进行分享交流. 共享锁又称为读锁,简称S锁,顾名思义,共享锁就是多个事务对于同一数据可以共享一把锁,都能 ...

  7. python之字典常用语法

    1. 创建字典 描述:生成字典 语法: dic={'k1':'v1'} 样例: dic=dict(k1='v1',k2='v2') dic={'k1':'v1','k2':'v2'} 2. 取键值ge ...

  8. 安卓作为udp服务器,PC作为客户端,仅监听

    安卓客户端作为udp服务器,监听其他客户端的数据,测试已成功 本次实验所用数据: 安卓作为服务器: 端口:8888            IP:192.168.1.104 电脑作为客户端: 端口:50 ...

  9. Google Guice学习

    学习动力:公司项目使用 官方文档:https://github.com/google/guice/wiki/Motivation 学习阶段:入门 主要部份: 简介 Bindings方式 Scopes设 ...

  10. C#数组和集合

    一维数组 概述:数组是通过指定数组的元素类型.数组的(秩)维数及数组每个维度上的上限和下限来定义的,及一个数组的定义需要包含以下几个要素. 类型   数组的维数   每个维的上限下限 声明:数据类型  ...