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. Hadoop权威指南:数据完整性

    Hadoop权威指南:数据完整性 [TOC] 常用的错误检测码是CRC-32(循环冗余校验) HDFS的数据完整性 HDFS会对写入的所有数据计算校验和,并在读取数据时验证校验和 datanode负责 ...

  2. Java程序性能优化读书笔记(一):Java性能调优概述

    程序性能的主要表现点: 执行速度:程序的反映是否迅速,响应时间是否足够短 内存分配:内存分配是否合理,是否过多地消耗内存或者存在内存泄漏 启动时间:程序从运行到可以正常处理业务需要花费多少时间 负载承 ...

  3. AFNetworking2.0和AFNetworking3.0 的HTTPS的配置

    前言: 由于苹果声明在前说是2017.01.01之后提交审核的APP,必须使用HTTPS请求,要不就直接驳回审核,吓得我们年前赶紧提交了一个版本,想着年后在弄这个https,结果又有消息说是苹果推迟了 ...

  4. Hbase数据库安装

    一.环境准备 1.Ubuntu14.04-server 2.ssh 3.jdk1.6 4.hbase-0.98.19-hadoop2-bin.tar.gz(下载地址http://www.apache. ...

  5. JS模块化写法

    /* 模块化写法*/ var Person=function(){ var name='Jone', age='24', sex='male'; function createIdea(){ //{. ...

  6. iOS详解MMDrawerController抽屉效果(一)

      提前说好,本文绝对不是教你如何使用MMDrawerController这个第三方库,因为那太多人写了 ,也太简单了.这篇文章主要带你分析MMDrawerController是怎么实现抽屉效果,明白 ...

  7. webqq的注册登记和聊天页面--运用jsonp跨域

    简介: 我们知道,ajax用于数据交互,但它不能跨域,跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求 http://www.google. ...

  8. MVC中登录页图片验证码总结

    直接上代码了 using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Imagi ...

  9. californium 框架设计分析

    Californium 源码分析 1. Californium 项目简介 Californium 是一款基于Java实现的Coap技术框架,该项目实现了Coap协议的各种请求响应定义,支持CON/NO ...

  10. 关于Console控制台输出的玩法

    你在浏览网页的时候,是否注意过这些网页的控制台输出了什么? Console这种东西,其实一般只有前端工作者才会注意到.console在我们实际开发中可是个宝贝,他是各种error和warning的展示 ...