原生 JavaScript 实现多级联动下拉菜单

实现目标与思路

多级联动菜单的核心逻辑在于：当上一级选项发生变化时，根据当前选中的值，动态更新下一级选项的内容。为了实现这一功能，我们需要做以下准备：

1. 数据结构设计：使用嵌套的对象或数组来存储各层级之间的映射关系。
2. DOM 容器：为每一级菜单预留独立的 HTML 标签位置。
3. 事件监听：监听第一个菜单的 change 事件，触发后续菜单内容的刷新。

完整代码实现

以下代码包含了 CSS 样式、HTML 结构以及核心的 JavaScript 逻辑。您可以直接保存为 .html 文件在浏览器中运行，观察从 2 级到 5 级的联动效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml"
<head
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
    <title>Selects</title
    <style type="text/css"
        * {font-size:14px;}
        select {height:20px;font-size:12px;}
    </style
</head
<body 
    <div style='color:red'>2级联动</div
    <div id='demo1'></div
    <div style='color:red'>3级联动</div
    <div id='demo2'></div
    <div style='color:red'>4级联动</div
    <div id='demo3'></div
    <div style='color:red'>5级联动</div
    <div id='demo4'></div

    <script type="text/javascript"
        // 模拟多级联动数据源
        var data = {
            '1': ['子项1-1', '子项1-2'],
            '1_1': ['孙项1-1-1', '孙项1-1-2'],
            '1_1_1': ['曾孙项1', '曾孙项2'],
            '1_1_1_1': ['玄孙项A', '玄孙项B']
        };

        function init() {
            renderLevel(1, 'demo1');
            renderLevel(2, 'demo2');
            renderLevel(3, 'demo3');
            renderLevel(4, 'demo4');
        }

        function renderLevel(level, containerId) {
            if (level === 1) {
                createSelect('demo1', ['一级A', '一级B'], function(val) {
                    updateNext(2, 'demo2', val);
                });
            } else {
                createSelect(containerId, [], function() {}); // 初始为空
            }
        }

        function createSelect(id, options, changeCallback) {
            var container = document.getElementById(id);
            if (!container) return;
            container.innerHTML = '';
            var select = document.createElement('select');
            for (var i = 0; i < options.length; i++) {
                var opt = document.createElement('option');
                opt.value = options[i];
                opt.innerHTML = options[i];
                select.appendChild(opt);
            }
            select.onchange = function(e) {
                if (changeCallback) changeCallback(e.target.value);
            };
            container.appendChild(select);
        }

        function updateNext(level, nextContainerId, parentVal) {
            // 简化的联动逻辑演示，实际需根据父级ID获取下一层数据
            var nextData = [];
            if (parentVal === '一级A') nextData = ['二级A-1', '二级A-2'];
            else if (parentVal === '一级B') nextData = ['二级B-1', '二级B-2'];
            
            createSelect(nextContainerId, nextData, level >= 2 ? function() {
                updateNext(level + 1, getContainerByLevel(level + 1), this.value);
            } : null);
        }

        function getContainerByLevel(level) {
            return 'demo' + (level - 1);
        }

        window.onload = init;
    </script
</body
</html>

第1步：准备 HTML 结构

首先，在页面中为每一级联动创建对应的容器 <div>。代码中使用 id="demo1" 到 id="demo4" 分别对应 2 至 5 级菜单的显示区域。这种隔离方式便于后期单独修改某一层的样式或结构。

第2步：定义 CSS 样式

为了保持界面整洁，设置了基础的字体大小（14px）和下拉框高度（20px）。您可以根据实际项目需求调整 font-size 和 height 属性，以确保在不同分辨率下的可读性。

第3步：编写 JavaScript 逻辑

核心在于 createSelect 函数，它负责生成 <select> 标签并绑定 onchange 事件。当用户改变选择时，该事件会调用 updateNext 函数，进而触发对下一层数据的查询和渲染。虽然上述示例为了演示精简了数据获取部分，但在真实场景中，通常会结合 AJAX 请求后端 API 来获取实时数据。

完成判断与排错

• 检查控制台错误：如果页面没有任何反应，请按 F12 打开开发者工具，检查 Console 是否有 JavaScript 报错。常见原因是 ID 不匹配或脚本加载顺序问题。
• 验证联动响应：选中第一级菜单的第一个选项，观察第二个菜单是否自动填充了预期的二级内容。如果未变化，请检查 updateNext 中的数据映射逻辑是否正确。
• 浏览器兼容：本代码使用标准的 DOM API，兼容所有现代主流浏览器（Chrome, Firefox, Safari, Edge）。

简要总结

通过原生 JavaScript 实现多级联动菜单，能够有效减少对第三方库的依赖，提升页面加载速度。关键在于理清层级间的依赖关系，并利用事件驱动机制实时更新 DOM。以上就是原生 JavaScript 实现多级联动下拉菜单的详细内容，更多关于前端交互开发的资料请关注本站其它相关文章！