selectize.js 是一个用于创建自定义样式和交互的下拉选择框的 JavaScript 库。它是一个基于 jQuery 的插件，可与大多数前端框架（如 React、Vue 和 Angular）一起使用。本文将介绍如何使用 npm 包安装和使用 selectize.js。
安装 selectize.js
要安装 selectize.js，请在终端中运行以下命令：
--- ------- ---------
此命令将从 npm registry 下载库并将其添加到您的项目中的 node_modules 目录中。
使用 selectize.js
通过以下步骤来使用 selectize.js：
- 首先，将 selectize.css 和 selectize.js 文件添加到 HTML 中。这些文件位于
node_modules/selectize/dist/css和node_modules/selectize/dist/js目录中。如果您使用 Webpack 或其他打包工具，则可以使用相对路径导入这些文件。
----- ---------------- ----------------------------- ------- ------------------------------------
- 创建一个
<select>元素，在其中添加选项。例如：
------- --------------- ------- ------------------------- ------- ------------ ---------- ------- ------------ ---------- ------- ------------ ---------- ---------
- 在 JavaScript 中初始化 selectize.js。例如：
--------------------------- -- ---- ---
- 在配置对象中设置选项。您可以参考 selectize.js 的文档以获取完整的选项列表。以下是一些常用的选项：
-
-- ------------- ----------
--------- -----
-- ------------ ------------------------
------- ------
-- -- ------ - -----------------------
------------ --------------- -
------ ------
--
-- --------------------
---------- --------------- ----- -
------------------ - - -------
-
-示例代码
以下是一个简单的示例，演示如何使用 selectize.js 创建一个带有自定义样式和回调函数的下拉选择框。
--------- -----
------
------
----- ----------------
------------------- ----------
----- ---------------- -----------------------------------------------------
------- ------------------------------------------------------
------- --------------------------------------------------------------------------
-------
------
---------------- -------
-----
------ --------------------------------
------- ---------------
------- -------------------------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
---------
------
--------
---------------------------
------- -----
--------- --
---------- --------------- ----- -
------------------ - - -------
-
---
---------
-------
-------在这个示例中，我们将 create 设置为 true，以允许用户创建新项。我们还将 maxItems 设置为 2，以限制选择的项数。当用户添加选项时，我们使用 onItemAdd 回调函数来记录它们的值。
总结
通过 npm 包 selectize.js，您可以轻松地创建自定义下拉选择框，并为其添加交互和样式。不
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32499