简介
jquery-cascading-dropdown是一个用于构建级联下拉列表（Cascading Dropdown）的jQuery插件。它可以让你在前端轻松地实现省市区、商品分类等级联下拉列表。
安装
安装jquery-cascading-dropdown非常简单，只需使用npm命令即可：
npm install jquery-cascading-dropdown --save
使用方法
HTML 结构
首先，在HTML中创建级联下拉列表所需的结构：
-- -------------------- ---- -------
---- -----------------
------- ----------------
------- ---------------------
---- ----- ---
---------
------- ----------------
------- ---------------------
---- ----- ---
---------
------- ----------------
------- ---------------------
---- ----- ---
---------
------在这个例子中，我们创建了一个带有三个下拉列表的.dropdown容器。每个下拉列表都有一个不同的类名（.level-1、.level-2和.level-3），以供后面的jQuery代码使用。
JavaScript 代码
接下来，我们需要写一些JavaScript来初始化这个级联下拉列表：
-- -------------------- ---- -------
-- ----------------------------------
------ - ---- ---------
------ ----------------------------
-- ---------
----------------------------------
------------ -
-
--------- -----------
------- --------------- -------- -
-- -------
-
--
-
--------- -----------
--------- -------------
------- --------------- -------- -
-- -------
-
--
-
--------- -----------
--------- ------------ ------------
------- --------------- -------- -
-- -------
-
-
-
---在这个例子中，我们使用了ES6的模块导入语法将jquery和jquery-cascading-dropdown导入。然后，我们使用jQuery选择器选择.dropdown容器并调用cascadingDropdown方法来初始化级联下拉列表。
cascadingDropdown方法接受一个对象作为参数，其中selectBoxes属性是必须的。selectBoxes是一个数组，其中包含了每个下拉列表的配置信息。
对于每个下拉列表，我们需要指定它的选择器（即上面HTML中所设置的类名）、它的依赖关系（如果有的话）以及加载数据的回调函数。
在这个例子中，我们为第一级、第二级和第三级下拉列表分别提供了一个回调函数来加载数据。注意，第二级下拉列表需要依赖于第一级下拉列表，而第三级下拉列表需要同时依赖于第一级和第二级下拉列表。
数据源
最后，我们需要编写数据源来加载每个下拉列表的选项。这里提供一个简单的例子：
-- -------------------- ---- -------
----- ---- - -
------ -
- ------ ------ ----- ----- --
- ------ ------ ----- ----- --
-- ---
--
------ -
- ------ ------ ----- ----- --
- ------ ------ ----- ----- --
-- ---
--
-- ---
--
-------- ------------------ ------ -------- -
----- ------- - ----------- -- ---
-----------------
-在这个例子中，我们使用了一个JavaScript对象来存储级联下拉列表的选项。对于每个下拉列表，我们都有一个函数来加载它的选项。这个函数
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37807