介绍
在前端开发中，下拉菜单是常见的交互组件。在需要选择多级分类或者区域等信息时，通常会使用三级联动的下拉菜单来优化用户体验。本文将讲解如何使用JS实现一个Select三级下拉菜单。
整体思路
- 通过HTML创建三个Select元素
- 将第二个和第三个Select元素禁用
- 当第一个Select元素选项变更时，根据其值动态生成第二个Select元素的选项，并启用该元素
- 当第二个Select元素选项变更时，根据其值动态生成第三个Select元素的选项，并启用该元素
- 最后，获取各级Select元素的选中值，进行后续处理
代码实现
-- -------------------- ---- ------- ------- ------------- ------- --------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- --------- ------- ------------ --------- ------- --------------------- --------- ------- ------------ --------- ------- --------------------- ---------
上面的代码创建了三个Select元素，其中第二个和第三个元素均被禁用。
接着，我们需要编写JavaScript代码，在第一个Select元素选项变更时动态生成第二个Select元素的选项，并启用该元素。
-- -------------------- ---- -------
----- ------- - -----------------------------------
----- ------- - -----------------------------------
----- ------- - -----------------------------------
----- ---- - -
-- -
--- -------
--- -------
--- ------
--
-- -
--- -------
--- -------
--- ------
--
-- -
--- -------
--- -------
--- ------
-
--
---------------------------------- ---------- -
----- ----- - -----------
----------------- - -------- -----------------------
----------------- - -------- -----------------------
-- ------- -
--- ---- --- -- ------------ -
----- ------ - ---------------------------------
------------ - ----
---------------- - -----------------
----------------------------
-
---------------- - ------
- ---- -
---------------- - -----
-
---------------- - -----
---上面的代码中，我们定义了一个data对象，其键值对分别表示第一个Select选项值对应的第二个Select选项和第三个Select选项。在第一个Select元素选项变更时，我们首先清空第二个和第三个Select元素的选项，并禁用第三个元素。然后根据当前选项值从data对象中获取对应的选项，并创建<option>元素添加到第二个Select中，最后启用第二个Select元素。
接下来，我们需要在第二个Select元素选项变更时动态生成第三个Select元素的选项，并启用该元素。
-- -------------------- ---- -------
---------------------------------- ---------- -
----- ----- - -----------
----------------- - -------- -----------------------
-- ------- -
--- ---- --- -- --------------------------- -
----- ------ - ---------------------------------
------------ - ----
---------------- - --------------------------------
----------------------------
-
---------------- - ------
- ---- -
---------------- - -----
-
---上面的代码中，我们首先清空第三个Select元素的选项。然后根据当前第一和第二个Select元素的选项值从data对象中获取对应的选项，并创建
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3994