介绍
jquery-multiselect 是一个基于 jQuery 的下拉复选框插件，可以非常方便地实现下拉框多选功能。它可以用于前端开发中，特别是在表单提交或筛选功能的实现中。
在本篇文章中，我们将会讲解 jquery-multiselect 的使用教程，包括安装、引入、初始化、参数配置、方法调用以及示例代码。
安装
可以使用 npm 来安装 jquery-multiselect，打开终端并输入以下命令即可安装：
npm install jquery-multiselect --save
引入
在 HTML 页面中引入 jQuery 和 jquery-multiselect 库文件。如下所示：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-multiselect/css/multi-select.css" /> <script src="https://cdn.jsdelivr.net/npm/jquery-multiselect/js/jquery.multi-select.js"></script>
如果使用的是 webpack 或者类似的构建工具，也可以使用以下方式进行引入：
import 'jquery'; import 'jquery-multiselect'; import 'jquery-multiselect/css/multi-select.css';
初始化
在 HTML 页面中使用 <select> 标签，并添加 multiple 属性来实现多选功能。例如：
-- -------------------- ---- -------
------- ---------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ------------------------
---------在 JavaScript 中对多选下拉框进行初始化，使用以下方式即可：
$('select[multiple]').multiSelect();如果想要添加更多的配置选项，可以使用对象字面量的方式进行参数配置，例如：
$('select[multiple]').multiSelect({
selectableHeader: "<div class='custom-header'>待选项</div>",
selectionHeader: "<div class='custom-header'>已选项</div>"
});参数配置
以下是 jquery-multiselect 的常用配置参数：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| selectableHeader | String | "可选项" | 待选项区域标题 |
| selectionHeader | String | "已选项" | 已选项区域标题 |
| selectableFooter | String | "" | 待选项区域底部信息 |
| selectionFooter | String | "" | 已选项区域底部信息 |
| enableFiltering | Boolean | false | 开启过滤功能 |
| keepOrder | Boolean | false | 保持选择的顺序 |
| matchBehavior | String | "both" | 匹配模式。可选值为 "both"、"left" 和 "right" |
| selectableOptgroup | Boolean | false | 允许选项分组 |
| onChange | Function | null | 选择改变后的回调函数 |
更详细的参数配置请参考 jquery-multiselect 官网。
方法调用
jquery-multiselect 还提供了一些方法供我们调用，例如：
refresh
刷新下拉框的显示状态。例如：
$('select[multiple]').multiSelect('refresh');selectAll
选择下拉框中的所有选项。例如：
$('select[multiple]').multiSelect('selectAll');deselectAll
取消下拉框中的所有选项。例如：
$('select[multiple]').multiSelect('deselectAll');示例代码
以下是一个使用 jquery-multiselect 的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
------- -----------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------- --
------- -----------------------------------------------------------------------------------------
-------
------
---------------------- -------
------- ---------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ------------------------
---------
------- -------------------------------
------- -----------------------------------
--------
------------ -
-----------------------------------
----------------- ----- ---------------------------------
---------------- ----- ---------------------------------
----------------- ----- ------------------------ -- -----------
---------------- ----- ------------------------ - ----------
---
-------------------------------- ---------- -
-----------------------------------------------
---
---------------------------------- ---------- -
-------------------------------------------------
---
---
---------
-------
-------以上就是 jquery-multiselect 的简单使用教程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8981e8991b448e603a