jquery-nice-select 是一个基于 jQuery 的自定义下拉选择框插件，支持多项选择和搜索功能。它可以轻松地在 Web 开发中使用，提升用户体验。
安装
要使用 jquery-nice-select 插件，首先需要通过 npm 进行安装。打开终端并输入以下命令：
npm install jquery-nice-select --save
引入
安装完成后，在 HTML 中引入 jquery-nice-select 和 jQuery 库。可以在 head 标签中放置以下代码：
<link rel="stylesheet" href="node_modules/jquery-nice-select/css/nice-select.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-nice-select/js/jquery.nice-select.min.js"></script>
使用
有了 jquery-nice-select 和 jQuery 库之后，就可以开始使用该插件了。下面是一些示例代码，演示如何在 HTML 中实现基本的选项列表。
简单选项列表
-- -------------------- ---- -------
------- --------------------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
---------
--------
---------------------------- -
-------------------------
---
---------这将在页面中创建一个简单的下拉选择框，并启用 jquery-nice-select 插件。一旦插件启用，它将自动将默认的下拉选择框替换为美观的自定义样式。
多项选择列表
-- -------------------- ---- -------
------- -------- --------------------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
---------
--------
---------------------------- -
-------------------------
---
---------这将创建一个允许多选的下拉选择框。
带搜索功能的选项列表
-- -------------------- ---- -------
------- --------------------
------- -------------------------------
--------- ------------
------- -----------------------
------- ----------------------
------- ----------------------
-----------
--------- -----------
------- ----------------------
------- ----------------------
------- -----------------------
-----------
---------
--------
---------------------------- -
-------------------------
---
---------这将创建一个具有搜索功能的下拉选择框，并将选项分组。
高级用法
jquery-nice-select 还提供了一些高级选项和回调函数，以便进行更深入的自定义和控制。以下是一些示例代码，演示如何使用这些选项。
自定义样式
-- -------------------- ---- -------
------- ------------------ --------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
---------
-------
------- ----- -
----------------- -----
------ -----
-
------- -------------- ------- ------ -
----------------- -----
-
--------
--------
---------------------------- -
--------------------------------
---
---------这将创建一个具有自定义样式的下拉选择框。在这个示例中，我们添加了一些 CSS 样式来定制选项列表的背景颜色和文本颜色，并使
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36113