JavaScript 实现树形下拉框方案

在网页开发中，树形下拉框是一种非常实用的交互组件，它能够以清晰的层级结构展示数据，方便用户进行选择。使用 JavaScript 来实现树形下拉框，能为网页带来更强大的功能和良好的用户体验。

我们需要构建树形结构的数据。通常可以使用 JSON 格式来表示，例如：

const treeData = [
    {
        id: 1,
        name: '父节点1',
        children: [
            { id: 11, name: '子节点11' },
            { id: 12, name: '子节点12' }
        ]
    },
    {
        id: 2,
        name: '父节点2',
        children: [
            { id: 21, name: '子节点21' },
            { id: 22, name: '子节点22' }
        ]
    }
];

接着，创建 HTML 结构来展示下拉框。可以使用 <select> 标签作为基础，再结合 JavaScript 动态生成树形选项。

<select id="treeSelect"></select>

然后，使用 JavaScript 来遍历树形数据并生成下拉框选项。通过递归函数，我们可以深入到每一个层级：

function generateTreeOptions(parent, tree) {
    tree.forEach(node => {
        const option = document.createElement('option');
        option.value = node.id;
        option.textContent = '  '.repeat(parent.level || 0) + node.name;
        document.getElementById('treeSelect').appendChild(option);
        if (node.children && node.children.length > 0) {
            generateTreeOptions({ level: (parent.level || 0) + 1 }, node.children);
        }
    });
}
generateTreeOptions({}, treeData);

在上述代码中，generateTreeOptions 函数接受一个父节点信息和树形数据数组。它为每个节点创建一个 <option> 元素，并根据层级添加缩进，以展示树形结构。如果节点有子节点，则递归调用自身继续生成子节点的选项。

为了增强用户体验，还可以添加一些交互功能，比如展开和收起子节点。可以通过监听下拉框的点击事件，动态显示或隐藏子选项。

通过这种方式，利用 JavaScript 实现的树形下拉框能够有效地展示复杂的层级数据，让用户在选择数据时更加直观和便捷，从而提升整个网页应用的交互性和易用性。无论是在数据管理系统、内容分类选择等场景，都能发挥出重要作用。