三级城市联动js代码

三级城市联动通常是指在前端页面上实现省、市、区三级下拉菜单的联动效果。这种功能常用于用户注册、地址填写等场景，以便用户能够方便地选择自己的地理位置。下面是一个简单的三级城市联动的JavaScript代码示例，使用了原生JavaScript和HTML来实现。

HTML部分

<!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 src="data.js"></script>
<script src="main.js"></script>
</body>
</html>

JavaScript部分（main.js）

document.addEventListener('DOMContentLoaded', function() {
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const districtSelect = document.getElementById('district');

    // 初始化省份数据
    for (const province of provinces) {
        const option = document.createElement('option');
        option.value = province.code;
        option.textContent = province.name;
        provinceSelect.appendChild(option);
    }

    // 省份改变时更新城市数据
    provinceSelect.addEventListener('change', function() {
        const selectedProvinceCode = this.value;
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (selectedProvinceCode) {
            const cities = provinces.find(p => p.code === selectedProvinceCode).cities;
            for (const city of cities) {
                const option = document.createElement('option');
                option.value = city.code;
                option.textContent = city.name;
                citySelect.appendChild(option);
            }
        }
    });

    // 城市改变时更新区县数据
    citySelect.addEventListener('change', function() {
        const selectedProvinceCode = provinceSelect.value;
        const selectedCityCode = this.value;
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (selectedCityCode) {
            const districts = provinces.find(p => p.code === selectedProvinceCode).cities.find(c => c.code === selectedCityCode).districts;
            for (const district of districts) {
                const option = document.createElement('option');
                option.value = district.code;
                option.textContent = district.name;
                districtSelect.appendChild(option);
            }
        }
    });
});

数据部分（data.js）

const provinces = [
    {
        code: '110000',
        name: '北京市',
        cities: [
            {
                code: '110100',
                name: '北京市',
                districts: [
                    { code: '110101', name: '东城区' },
                    { code: '110102', name: '西城区' },
                    // ...其他区县
                ]
            }
        ]
    },
    // ...其他省份
];