城市三级联动js

城市三级联动通常指的是在网页或应用中，通过下拉菜单选择省（一级）、市（二级）、区/县（三级）的一种交互方式。以下是关于城市三级联动的相关信息：

基础概念

数据结构：通常使用树形结构或者嵌套数组来存储省市区的数据。
DOM操作：通过JavaScript操作DOM元素，动态更新下拉菜单的内容。
事件监听：监听用户在下拉菜单中的选择事件，根据选择动态加载下一级的选项。

类型

静态数据：预先定义好省市区的数据，在页面加载时直接使用。
动态数据：通过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" disabled>
        <option value="">请选择城市</option>
    </select>
    <select id="district" disabled>
        <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>';
            districtSelect.disabled = true;

            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.disabled = false;
            } else {
                citySelect.disabled = true;
                districtSelect.disabled = true;
            }
        });

        // 城市选择事件
        citySelect.addEventListener('change', function() {
            let province = provinceSelect.value;
            let city = this.value;
            districtSelect.innerHTML = '<option value="">请选择区县</option>';

            if (city) {
                let districts = data[province][1][data[province][1].indexOf(city) + 1];
                for (let district of districts) {
                    let option = document.createElement('option');
                    option.value = district;
                    option.text = district;
                    districtSelect.appendChild(option);
                }
                districtSelect.disabled = false;
            } else {
                districtSelect.disabled = true;
            }
        });
    </script>
</body>
</html>