multi-select 是一个基于 jQuery 的下拉多选框插件，它可以让用户从下拉列表中选择多个选项。在前端开发中，它被广泛应用于各种表单和数据筛选场景。
安装 multi-select
要使用 multi-select，你需要先将其安装并引入到你的项目中。在命令行中运行以下命令：
npm install multi-select --save
这将会下载 multi-select 并将其作为项目依赖保存在 package.json 文件中。
引入 multi-select
一旦你已经安装了 multi-select，就可以将其引入到你的代码中。一般来说，你需要在 HTML 页面的 head 标签内引入 jQuery 和 multi-select 的 CSS 文件：
<head> <link rel="stylesheet" href="/path/to/jquery.css"> <link rel="stylesheet" href="/path/to/multi-select.css"> </head>
然后，在 body 标签底部引入 jQuery 和 multi-select 的 JavaScript 文件：
<body> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.multi-select.js"></script> </body>
初始化 multi-select
你已经成功引入了 multi-select，现在你需要初始化它以便在页面中使用。在你的 JavaScript 代码中，使用以下代码初始化 multi-select：
$('select[multiple]').multiSelect();这将会自动将所有带有 multiple 属性的 select 元素转换成 multi-select 控件。如果你想为某个 select 元素指定特定的选项，你可以使用以下代码：
$('#mySelect').multiSelect({
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='搜索...'>",
selectionHeader: "<div>已选择的选项</div>",
});这会将 id 为 mySelect 的 select 元素转换成 multi-select 控件，并添加一个可搜索的下拉框和一个“已选择的选项”标题。
处理 multi-select 的值
一旦用户选择了 multi-select 中的选项，你就需要将它们的值提交到服务器或者进行其他处理。你可以使用以下代码来获取 multi-select 的值：
$('#mySelect').multiSelect('getSelects');这会返回一个包含所有选中选项的值的数组。
示例代码
以下是一个完整的使用 multi-select 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
----- ---------------- ---------------------------
----- ---------------- ---------------------------------
------- ----------------------------------
------- -----------------------------------------------
-------
------
---------------- -------
------- -------- --------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
--------
----------------------------
----------------- ------- ----------- -------------------- ------------------ ----------------------
---------------- --------------------
---
----------------------------------- -
--- -------------- - -----------------------------------------
----------------------
---
---------
-------
-------这个示例页面将会展示一个带有多选框和“已选择的选项”标题的 multi-select 控件。当用户点击“提交”按钮时，它会弹出一个包含已选择选项值的对话框。
总结
multi-select 是一个非常有用的 jQuery 插件，可以让你轻松地实现下拉多选框控件。在使用它之前，你
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34704