介绍
@cartok/hierarchy-select 是一个基于 jQuery 的插件，为前端开发者提供了一种实现级联选择器（联动下拉框）的方法。如果你的项目需要使用联动下拉框，那么本包可以为你提供非常有价值的解决方案。
安装
要使用 @cartok/hierarchy-select，你需要安装 Node.js 和 npm，安装方法见 Node.js 官网（https://nodejs.org/zh-cn/download/）。然后在终端输入以下命令：
npm install @cartok/hierarchy-select
这将会把 @cartok/hierarchy-select 安装到你的项目依赖中。然后你需要使用 webpack，Browserify 或 RequireJS 之类的模块加载器来使用它。
如果你想在浏览器中使用它，你可以直接在 HTML 文件中引入它:
<script src="https://cdn.jsdelivr.net/npm/@cartok/hierarchy-select@1.0.1/dist/hierarchy-select.min.js"></script>
此外，你还需要引入 jQuery：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
使用方法
基础用法
首先在 HTML 文件中创建选择框：
<select id="province"></select> <select id="city"></select> <select id="district"></select>
然后在 JavaScript 文件中配置 hierarchy-select：
-- -------------------- ---- -------
---------- -- -
--------
---- -----------------------------------
------- ------
-------- -------- -- -
----------------------------- -
----- -------
------------ -------
---
-
---
--------------------------- - -- -
----- ---------- - ------------------
--------
---- --------------------------------
------- ------
----- -------------
-------- -------- -- -
------------------------- -
----- -------
------------ -------
---
-
---
---
----------------------- - -- -
----- ------ - ------------------
--------
---- -----------------------------------
------- ------
----- ---------
-------- -------- -- -
----------------------------- -
----- -------
------------ --------
---
-
---
---
---高级用法
选项
除了基本用法外，@cartok/hierarchy-select 还提供了许多选项。以下是一些常用选项：
- data：要显示的数据。它应该是一个数组，每个元素都是一个包含 value 和 text 属性的对象。
- placeholder：没有选中项时显示的文本。它应该是一个字符串。
- separator：用来分隔各级选项的字符串。默认值是 " > "。
事件
@cartok/hierarchy-select 还提供了多个事件，你可以使用这些事件来处理用户操作。以下是一些常用事件：
- change：当选择器的值发生变化时触发。
- beforeChange：在选择器的值变化前触发，你可以在这个事件中阻止值的变化。
- afterInit：在选择器初始化完成后触发。
- beforeInit：在选择器初始化之前触发，你可以在这个事件中进行一些准备工作。
除了这些常用事件外，@cartok/hierarchy-select 还提供了一些其它事件，你可以在官方文档中查看它们的详细内容。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
-----------------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
-------
------
------- -----------------------
------- -------------------
------- -----------------------
--------
---------- -- -
--------
---- -----------------------------------
------- ------
-------- -------- -- -
----------------------------- -
----- -------
------------ -------
---
-
---
--------------------------- - -- -
----- ---------- - ------------------
--------
---- --------------------------------
------- ------
----- -------------
-------- -------- -- -
------------------------- -
----- -------
------------ -------
---
-
---
---
----------------------- - -- -
----- ------ - ------------------
--------
---- -----------------------------------
------- ------
----- ---------
-------- -------- -- -
----------------------------- -
----- -------
------------ --------
---
-
---
---
---
---------
-------
-------结论
使用 @cartok/hierarchy-select 你可以轻松地实现级联选择器，让你的用户更加便捷地选择选项。这个包提供了丰富的选项和事件，你可以根据项目需求进行自由配置。快去试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f6d9381d61a3540efe