js 三级联动菜单

在Web开发中，三级联动菜单是一种常见的交互设计，它允许用户通过多级选择来逐步缩小数据范围，最终确定一个具体的选项。这种设计常见于分类选择、地区选择等场景。

基础概念

三级联动菜单通常涉及三个下拉列表（select元素），每个列表的内容依赖于前一个列表的选择结果。例如，第一个列表选择国家，第二个列表根据选择的国家显示省份，第三个列表根据选择的省份显示城市。

实现优势

用户体验：用户可以通过逐步筛选快速找到所需选项，减少选择错误。
数据组织：有助于将大量数据进行有效组织和管理。
界面简洁：避免一次性展示过多选项，保持界面整洁。

类型

静态数据：预先定义好的数据，适用于数据量不大且不经常变动的场景。
动态数据：通过Ajax请求从服务器获取数据，适用于数据量大或需要实时更新的场景。

应用场景

地区选择（国家-省份-城市）
商品分类（大类-小类-具体商品）
组织结构选择（公司-部门-团队）

实现示例

以下是一个简单的三级联动菜单实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动菜单示例</title>
</head>
<body>
    <select id="country">
        <option value="">请选择国家</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
    </select>

    <select id="province" disabled>
        <option value="">请选择省份</option>
    </select>

    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>

    <script>
        const data = {
            china: {
                beijing: ['东城区', '西城区'],
                shanghai: ['黄浦区', '徐汇区']
            },
            usa: {
                california: ['洛杉矶', '旧金山'],
                texas: ['休斯顿', '达拉斯']
            }
        };

        document.getElementById('country').addEventListener('change', function() {
            const country = this.value;
            const provinceSelect = document.getElementById('province');
            const citySelect = document.getElementById('city');

            provinceSelect.innerHTML = '<option value="">请选择省份</option>';
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            citySelect.disabled = true;

            if (country) {
                provinceSelect.disabled = false;
                for (const [province, cities] of Object.entries(data[country])) {
                    const option = document.createElement('option');
                    option.value = province;
                    option.textContent = province;
                    provinceSelect.appendChild(option);
                }
            } else {
                provinceSelect.disabled = true;
                citySelect.disabled = true;
            }
        });

        document.getElementById('province').addEventListener('change', function() {
            const country = document.getElementById('country').value;
            const province = this.value;
            const citySelect = document.getElementById('city');

            citySelect.innerHTML = '<option value="">请选择城市</option>';

            if (province) {
                citySelect.disabled = false;
                data[country][province].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            } else {
                citySelect.disabled = true;
            }
        });
    </script>
</body>
</html>