jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大，可以实现多选和单选，可制作打开和关闭下拉框时的炫酷动画效果，提供丰富的回调函数和其它方法。
使用方法
使用该多选下拉列表框插件需要在页面中引入jQuery UI相关文件，jQuery以及插件本身需要的jquery.multiselect.css和jquery.multiselect.js文件。
<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css" />
<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery.multiselect.js"></script>
|
HTML结构
该下拉列表框的HTML结构为标准的下拉列表框结构，同时需要为它添加multiple属性。
<select id="example" name="example" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
|
初始化插件
在页面DOM元素加载完毕之后，可以通过multiselect()方法来初始化该下拉列表框插件。
$(document).ready(function(){
$("#example").multiselect();
});
|
配置参数
可以在初始化插件的时候以对象的方式传入需要的参数：
$("select").multiselect({
header: "请选择一个选项！"
});
|
| 参数 |
默认值 |
描述 |
| header |
true |
是否显示下拉列表框的头部，如果传入的是一个字符串，默认的”check all”, “uncheck all” 和 “close”超链接将被字符串替换 |
| height |
175 |
checkbox容器区域（滚动区域）的高度，如果设置为“auto”，会自动根据选项的多少来进行计算 |
| minWidth |
225 |
整个组件的最小宽度，设置为“auto”将禁用该属性 |
| checkAllText |
Check all |
默认的“Check all”文本 |
| uncheckAllText |
Uncheck All |
默认的“Uncheck All”文本 |
| noneSelectedText |
Select options |
选项被选择时select box的默认文本 |
| selectedText |
# selected |
选项被选择时显示在select box中的文本（如果selectedList设置为false）。#会被自动替换为被选择的选项的序号。如果使用2个#，那么第二个会被看做是可选选项的总数，例如# of # checked。该选项还可以接收一个带3个参数的匿名函数：被选择选项的序号，可用选项的总数和被选择的checkbox的DOM元素 |
| selectedList |
false |
被选择选项的列表，如果设置为false表示禁用该功能。 |
| show |
空字符串 |
下拉列表打开时的动画效果，要控制动画的速度，可以传入一个数组：['slide', 500] |
| hide |
空字符串 |
下拉列表关闭时的动画效果，要控制动画的速度，可以传入一个数组：['slide', 500] |
| autoOpen |
false |
下拉列表是否在初始化后自动展开 |
| multiple |
true |
如果设置为false，组件将使用单选按钮代替多选按钮，此时只可以进行单选 |
| classes |
空字符串 |
自定义的class类。可以通过它对选项进行分隔。你需要自定义按钮和下拉列表的CSS样式：
/* button */ .ui-multiselect.myClass {}
/* menu */ .ui-multiselect-menu.myClass {} |
| position |
空对象 |
该选项可以将下拉菜单放置在相对于下拉按钮的任何地方：entered, above, below（默认）等。 |
事件
该下拉列表框调用方法的方式如下：
$("#multiselect").bind("multiselectopen", function(event, ui){
});
$("#multiselect").multiselect({
open: function(event, ui){
}
});
|
| 事件 |
描述 |
| create |
组件第一次被创建时触发 |
| beforeopen |
下拉菜单被打开前触发，返回false可以阻止下拉菜单的打开 |
| open |
下拉菜单被打开后触发 |
| beforeclose |
下拉菜单被关闭前触发，返回false可以阻止下拉菜单的关闭 |
| close |
下拉菜单被关闭后触发 |
| checkall |
所有选项被选择或点击头部的“全部选择”按钮时触发 |
| uncheckall |
所有选项都不被选择或点击头部的“全部不选择”按钮时触发 |
| optgrouptoggle |
当optgroup标签被点击时触发。该事件接收原始事件对象作为参数 |
| click |
当checkbox被选择或取消选择时触发 |
方法
当插件被初始化为一个实例之后，可以通过方法名称来调用方法。
$("#multiselect").multiselect("method_name");
|
| 方法 |
描述 |
| open |
打开下拉菜单 |
| close |
关闭下拉菜单 |
| refresh |
重新加载下拉列表。如果你通过Ajax或操作DOM元素的方法来动态的添加和删除了列表选项，可以通过refresh方法来刷新列表 |
| disable |
禁用下拉列表 |
| enable |
启用下拉列表 |
| checkAll |
全部选择 |
| uncheckAll |
全部不选 |
| isOpen |
返回代表当前下拉列表是否打开的布尔值 |
| getChecked |
返回当前被选择的选项的数组 |
| getButton |
返回按钮元素 |
| widget |
返回下拉列表容器元素 |
| option |
在插件初始化之后设置或获取一个选项。如果修改了选项，它会立刻生效 |
| destroy |
销毁实例 |
jQuery UI MultiSelect Widget插件的github地址为：https://github.com/ehynds/jquery-ui-multiselect-widget
在线预览 网盘下载
郑重声明：
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
