js实现select三级联动

基础概念

三级联动是指在前端页面中，通过JavaScript实现三个下拉菜单（select元素）之间的联动效果。当用户选择第一个下拉菜单的某个选项时，第二个下拉菜单会根据第一个菜单的选择动态更新其选项；同理，第三个下拉菜单会根据第二个菜单的选择动态更新。

类型

静态数据联动：使用固定的数据源进行联动。
动态数据联动：通过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) {
                for (let city in data[province]) {
                    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) {
                data[province][city].forEach(district => {
                    let option = document.createElement('option');
                    option.value = district;
                    option.text = district;
                    districtSelect.appendChild(option);
                });
            }
        });
    </script>
</body>
</html>