Jquery-multiselect插件使用文档

最新推荐文章于 2025-02-19 11:44:58 发布

冰糖雪梨不是梨

最新推荐文章于 2025-02-19 11:44:58 发布

阅读量2.5w

点赞数

文章标签：前端开发

本文链接：https://blog.csdn.net/userhan123/article/details/80240367

版权

本文档介绍了Jquery-multiselect插件的基本用法、配置选项及API方法。该插件能够将普通的多选下拉框转换为更易用的形式，并提供了丰富的自定义功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
这里写图片描述