multiSelect 下拉多选插件

最新推荐文章于 2020-12-31 03:04:12 发布

转载最新推荐文章于 2020-12-31 03:04:12 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xwtbk/p/6549365.html

文章标签：

#javascript #ViewUI

本文介绍了一款基于jQuery的下拉多选插件multiSelect，该插件能够实现在下拉框中进行多选操作，并提供了全选、取消全选等功能。文章详细介绍了使用步骤，包括引入必要的文件、编写HTML代码、配置JS参数等。

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 1</option>
      <option value='elem_2'>elem 2</option>
      <option value='elem_3'>elem 3</option>
      <option value='elem_4'>elem 4</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类添加到多选择容器。