Jquery-multiselect插件使用文档
组件介绍
替换标准的 (含有multiple属性的select标签)的一套交互友好的组件。
特点
- 支持键盘操作
- 提供一些回调函数
- CSS可完全定制化
- 依赖jquery1.8以上版本
基本用法
<!DOCTYPE html>
<html>
<head>
<title>multiselect</title>
<meta charset="utf-8">
<!-- 引入CSS -->
<link href="assets/jquery-multiselect/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 定义select及选择器 -->
<select multiple="multiple" id="my-select" name="my-select">
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
<option value='e'>e</option>
<option value='f'>f</option>
<option value='g'>g</option>
<option value='h'>h</option>
<option value='i'>i</option>
<option value='j'>j</option>
</select>
</div>
<!-- 引入jquery,版本不低于1.8 -->
<script type="text/javascript" src="assets/jquery.min.js"></script>
<!-- 引入插件核心JS -->
<script type="text/javascript" src="assets/jquery-multiselect/jquery.multi-select.js"></script>
<script type="text/javascript">
$('#my-select').multiSelect(); //初始化基本用法
</script>
</body>
</html>
选项
afterInit
类型:function
默认值:function(container){}
初始化multiSelect后执行的方法。
afterSelect
类型:function
默认值:function(values){}
选中选项后执行的方法。
afterDeselect
类型:function
默认值:function(values){}
取消选中后执行的方法。
selectableHeader
类型:HTML/Text
默认值:null
自定义可选区域header。
selectableFooter
类型:HTML/Text
默认值:null
自定义可选区域footer。
selectionHeader
类型:HTML/Text
默认值:null
自定义已选区域header。
selectionFooter
类型:HTML/Text
默认值:null
自定义已选区域footer。
disabledClass
类型:String
默认值: disabled
禁用状态选项的css class。
selectableOptgroup
类型:Boolean
默认值:false
为true时点击optgroup时等同于选中所有子选项。
keepOrder
类型:Boolean
默认值:false
为true时已选区域的选项根据选中顺序排序。
dblClick
类型:Boolean
默认值:false
为true时双击才会选中选项。
cssClass
类型:String
默认值:''
在multiselect容器(.ms-container)上添加自定义css class。
方法
.multiSelect(options)
初始化multi-select多选插件。
$('#my-select').multiSelect({});
.multiSelect(‘select’, String|Array)
选中匹配值的一项或多项。
$('#my-select').multiSelect('select', '选项1');
$('#my-select').multiSelect('select',['选项1', '选项3']);
.multiSelect(‘deselect’, String|Array)
取消选中匹配值的一项或多项。
$('#my-select').multiSelect('deselect', '选项2');
$('#my-select').multiSelect('deselect', ['选项 2', '选项4']);
.multiSelect(‘select_all’)
选中所有选项。
$('#my-select').multiSelect('select_all');
.multiSelect(‘deselect_all’)
取消选中所有选项。
$('#my-select').multiSelect('deselect_all');
.multiSelect(‘refresh’)
刷新当前multi-select。
$('#my-select').multiSelect('refresh');
.multiSelect(‘addOption’, Hash)
以键值对形式动态添加选项到multi-select。
$('#my-select').multiSelect('addOption',{value: 'test',text: 'test',index: 0,nested: ''optgroup_label})
键盘操作
实例
引入CSS
<link href="assets/jquery-multiselect/multi-select.css" media="screen" rel="stylesheet" type="text/css">
引入JS
<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery-multiselect/jquery.multi-select.js"></script>
HTML