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. spring mvc 文件下载

    在controller中进行代码编写: @RequestMapping("/download") public ResponseEntity<byte[]> downl ...

  2. margin三个值

    http://www.cnblogs.com/wangkongming/p/3204734.html margin标记可以带一个.二个.三个.四个参数,各有不同的含义. margin: 20px;(上 ...

  3. apache 运行php环境之困扰,无法加载多个不同的.html文件

    又是一个项目,为多个纯静态html页面h5游戏页,原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoot目录,进行测试了. 刚开始使用目 ...

  4. 数据挖掘之聚类算法K-Means总结

    序 由于项目需要,需要对数据进行处理,故而又要滚回来看看paper,做点小功课,这篇文章只是简单的总结一下基础的Kmeans算法思想以及实现: 正文: 1.基础Kmeans算法. Kmeans算法的属 ...

  5. Xamarin 小试牛刀 通知栏消息通知和按钮(基于Java代码人肉转换)

    本示例基于网友现有安卓项目人肉翻译,在Xamarin中替换和修改了很多方法的命名,比如某些属性需要去掉getName的get前缀, 有些方法名称需要使用Pascal命名法替换Java的Camel 命名 ...

  6. js获取当前时间戳

    当使用js时我们可以使用timestamp = (new Date()).valueOf();直接获取当前时区时间点的时间戳.注意:js中时间戳的单位是毫秒,而php中则是秒

  7. 读书笔记 effective c++ Item3 在任何可能的时候使用 const

    Const可以修饰什么?   Const 关键字是万能的,在类外部,你可以用它修饰全局的或者命名空间范围内的常量,也可以用它来修饰文件,函数和块作用域的静态常量.在类内部,你可以使用它来声明静态或者非 ...

  8. c#类,接口,结构,抽象类介绍 以及抽象和接口的比较

    c#中的类是最常见的实际上就是对某种类型的对象定义变量和方法的原型. 结构是值类型,而类是引用类型. 1.与类不同,结构的实例化可以不使用 new 运算符.结构可以声明构造函数,但它们必须带参数. 2 ...

  9. HDU 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你

    悼念512汶川大地震遇难同胞——一定要记住我爱你 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  10. Unity预计算光照的学习(速度优化,LightProb,LPPV)

    1.前言 写这篇文章一方面是因为unity的微博最近出了关于预计算光照相关的翻译文章,另一方面一些美术朋友一直在抱怨烘培速度慢 所以抱着好奇的心态来学习一下unity5的PRGI预计算实时光照 2.基 ...