在前端开发中，下拉列表是一种常见的 UI 组件。但是，有时候我们需要在下拉列表中显示多级树形菜单，这就需要用到一些特殊的技巧了。本文将介绍如何使用 JavaScript 实现在下拉列表中显示多级树形菜单，并提供详细的示例代码。
实现方法
我们可以使用 JavaScript 和 DOM 操作来动态生成下拉列表中的选项。具体实现方式如下：
首先，我们要准备好树形数据。这些数据可以是一个 JSON 对象或者数组，其中每个节点都包含一个标识符和一个名称。如果当前节点还有子节点，则在该节点中添加一个 children 属性，用于存储子节点的信息。
-- -------------------- ---- ------- ----- -------- - - - --- -- ----- ------ --------- - - --- -- ----- ------- -- - --- -- ----- -------- --------- - - --- -- ----- --------- -- - --- -- ----- --------- - - - - -- - --- -- ----- ----- -- - --- -- ----- ----- - --接下来，我们需要创建一个空的 select 元素，并将其添加到 HTML 页面中。
<select id="tree-select"></select>
然后，我们可以使用递归函数
buildOption来遍历树形数据，并动态生成 option 元素。该函数接收两个参数：当前节点和缩进级别。如果当前节点还有子节点，那么递归调用buildOption函数生成子节点的 option 元素。-- -------------------- ---- ------- -------- ----------------- ------ - ----- ------ - --------------------------------- ------------ - -------- ---------------- - ---------------------------------------------------------- ----------------------------------------------------------- -- --------------- - --- ---- - - -- - - --------------------- ---- - ----------------------------- ----- - --- - - - --- ---- - - -- - - ---------------- ---- - ------------------------ --- -最后，我们还需要为 select 元素添加一个 change 事件监听器，以便在用户选中某个 option 后，能够获取到该节点的信息。
-- -------------------- ---- ------- ----- ------------- - --------------------------------------- ---------------------------------------- ---------- - ----- ---------- - ------------------------------ ----- ------------ - -------------------------- ------------ -------------------------- --- -------- ----------------------- --- - --- ---- - - -- - - ------------- ---- - ----- ---- - --------- -- -------- --- --- - ------ ----- - -- --------------- - ----- ------ - ------------------------------- ---- -- -------- - ------ ------- - - - ------ ----- -
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- --------------
-------
------
------- --------------------------
--------
----- -------- - -
-
--- --
----- ------
--------- -
-
--- --
----- -------
--
-
--- --
----- --------
--------- -
-
--- --
----- ---------
--
-
--
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------