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. Flex移动皮肤开发(一)

    范例文件 mobile-skinning-part1.zip Flex 4.5提供的移动增强的皮肤特性,支持触摸交互.性能优良,并且考虑到了内存占用问题.尽管目前市场上有不少性能优异的设备,但典型的S ...

  2. window下redis的安装

    1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本2.根据PHP版本号,编译器版本号和CPU架构,选择php_redis-2.2.5-5.5-ts-vc11-x86.zip和ph ...

  3. canvas绘图详解-06-绘制一个五角星-常用绘图原理

    先将如何画一个正规的五角星 在五角星的内外画两个圆,五角星有五个角,360/5=72度 所以得出这两个角的度数 然后算出这两个点坐标 角度转弧度 角度/180*Math.PI 所以外顶点坐标 x:   ...

  4. TFS 测试用例导入、导出工具

    TFS的测试管理提供了测试规划.创建.运行以及进度跟踪等功能.测试人员通过浏览器就几乎可以完成手个测试的全部过程. 用过TFS测试用例的朋友们,很多人应该都知道,在TFS的Portal中以及相应的数据 ...

  5. appium python andiroid自动化文档整理笔记。

    利用一天时间去整理appium for android文档.传送门 利用业余时间自己翻阅资料,google.百度等去查找,费劲一番功夫,最后终于成行了这篇文档. 也是作者对最近自己的学习的一个总结吧, ...

  6. std::vector 源代码

    vector身为一个动态数组,每次以空间不够的时候会以2倍的倍数增加,而且每次扩充的时候分为3部,分配内存,拷贝数据,释放内存 vector内部有两个成员变量,begin,finish ,endcat ...

  7. WKWebView的使用与JS交互详细解读

    前言: WKWebView 这是在iOS8.0之后增加的一个比UIWebView更加完善和强大的控件!看网上关于它的博客也是有许多的了,从各个方面总结一下这个WKWebView看网上说它主要是为了和J ...

  8. Redis 学习数据类型

    该文使用centos6.5 64位 redis-3.2.8 [root@localhost bin]# netstat -tunpl |grep 6379  查看redis 是否启动成功 一.Stri ...

  9. BZOJ 3479: [Usaco2014 Mar]Watering the Fields(最小生成树)

    这个= =最近刷的都是水题啊QAQ 排除掉不可能的边然后就最小生成树就行了= = CODE: #include<cstdio>#include<iostream>#includ ...

  10. ajax面试汇总

    Ajax系列面试题总结: 1.Ajax 是什么? 如何创建一个Ajax? Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要 ...