js 城市二级联动

基础概念：城市二级联动是指在城市选择时，先选择省份（或直辖市、自治区等），然后根据所选省份动态加载该省份下的城市列表，以实现联动效果，提高用户选择城市的便捷性。

相关优势：

提升用户体验：用户可以快速定位到自己所在的城市，无需手动搜索或输入。
数据准确性：通过联动，可以确保省份和城市数据的匹配性，减少错误。
减少页面加载时间：只加载用户选择的省份下的城市，避免一次性加载所有城市数据，减轻服务器压力。

类型：

静态数据联动：预先定义好省份和城市的数据，通过JavaScript进行控制。
动态数据联动：从服务器获取省份和城市数据，根据用户选择动态加载。

应用场景：

注册页面：用户填写地址信息时。
物流配送：选择配送地址时。
旅游预订：选择出发地和目的地时。

示例代码（静态数据联动）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市二级联动</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广东">广东</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const cityData = {
            '北京': ['北京市'],
            '上海': ['上海市'],
            '广东': ['广州市', '深圳市', '珠海市']
        };

        provinceSelect.addEventListener('change', function() {
            const province = this.value;
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            if (province && cityData[province]) {
                cityData[province].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });
    </script>
</body>
</html>

遇到的问题及解决方法：