三级联动js

三级联动通常指的是在前端页面上，有三个下拉选择框（select），它们之间存在级联关系。当用户选择一个选择框的值时，下一个选择框的内容会根据前一个选择框的选择而动态改变。这种交互方式常见于地址选择（省、市、区）、分类筛选等场景。

基础概念

三级联动主要依赖于JavaScript来实现动态数据绑定和事件监听。通过监听前一个选择框的change事件，可以动态地更新后续选择框的选项。

优势

用户体验：用户可以直观地看到不同层级之间的关联，操作更加便捷。
数据准确性：减少了用户手动输入可能带来的错误。
减少服务器请求：大部分数据可以在客户端处理，减轻服务器压力。

类型

静态数据：所有选项在页面加载时就已经确定。
动态数据：选项通过AJAX请求从服务器获取。

应用场景

地址选择：省、市、区三级联动。
商品分类：大类、中类、小类联动。
时间选择：年、月、日联动。

示例代码

以下是一个简单的三级联动示例，使用静态数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动示例</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区县</option>
    </select>

    <script>
        const data = {
            "北京": ["北京市", ["东城区", "西城区"]],
            "上海": ["上海市", ["黄浦区", "徐汇区"]],
            // 其他省份和城市数据...
        };

        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const districtSelect = document.getElementById('district');

        // 初始化省份选项
        for (let province in data) {
            let option = document.createElement('option');
            option.value = province;
            option.text = province;
            provinceSelect.appendChild(option);
        }

        // 省份选择改变事件
        provinceSelect.addEventListener('change', function() {
            let province = this.value;
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            if (province) {
                let cities = data[province][1];
                for (let city of cities) {
                    let option = document.createElement('option');
                    option.value = city;
                    option.text = city;
                    citySelect.appendChild(option);
                }
            }
        });

        // 城市选择改变事件
        citySelect.addEventListener('change', function() {
            let province = provinceSelect.value;
            let city = this.value;
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            if (city) {
                let districts = data[province][1];
                for (let district of districts) {
                    if (district === city) {
                        for (let d of data[province][2]) {
                            let option = document.createElement('option');
                            option.value = d;
                            option.text = d;
                            districtSelect.appendChild(option);
                        }
                        break;
                    }
                }
            }
        });
    </script>
</body>
</html>