介绍
linkage-selector 是一个可以将多个级别的下拉选项列表进行联动的 npm 包，可以方便的用于前端开发中需要多层级下拉菜单的场景。
安装
使用 npm 安装 linkage-selector：
--- ------- ---------------- ------
使用
- 首先在 HTML 中引入相关的 CSS 和 JS 文件：
----- ---------------- -------------------------------- ------- ---------------------------------------
- 在 HTML 中添加下拉选项列表：
------- ------------------------ ------- --------------------- ------- ------------------------
- 在 JS 中初始化并联动下拉选项列表：
------ --------------- ---- -------------------
----- --------- - -
- ------ ------ ----- ----- --
- ------ ------ ----- ----- --
- ------ ------ ----- ----- --
---
--
----- ------ - -
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ------ --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
- ------ ---------- ----- ----- --
---
--
----- --------- - -
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ------ --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
- ------ -------------- ----- ----- --
---
--
----- -------- - --- -----------------
-------- -
- ------- ------------------------------------- ----- --------- --
- ------- ---------------------------------- ----- ------ --
- ------- ------------------------------------- ----- --------- --
--
--------- --------
-------- -------
--------- -------- ------ -- -
-------------------- -- ------- ---------- --------------
------------------- -- ------- ------ ------
--
---
----------------API
构造函数
创建一个新的 linkage-selector 实例。
----- -------- - --- -------------------------
options
一个包含下拉选项列表集合的数组，每个数组项包含：
- select：下拉选项元素。
- data：下拉选项数据。
------- - -
-
------- ------------------
----- -- ------ ------ ----- ----- -- -----
--
---
--valueKey
设置下拉选项数据中的 value 名称，默认为 "value"。
textKey
设置下拉选项数据中的 text 名称，默认为 "text"。
方法
init()
初始化并联动下拉选项列表。
----------------
事件
onChange
当下拉选项列表发生变化时触发。
----------------- - -------- ------ -- - -------------------- -- ------- ---------- -------------- ------------------- -- ------- ------ ------ --
示例代码
完整的示例代码可以在 Github 上获取：https://github.com/zuixinkong/linkage-selector。
总结
linkage-selector 为前端开发者提供了一个方便的多层级下拉菜单联动的解决方案。希望通过本文对其使用方法有更深刻的了解，能够在实战中更好地应用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562f681e8991b448e0bd3