js 地址四级联动

在JavaScript中实现地址四级联动（通常指省、市、区/县、街道/乡镇的联动选择）是一种常见的表单增强功能，可以提升用户体验并减少输入错误。以下是关于地址四级联动的基础概念、优势、类型、应用场景以及常见问题的解决方案。

基础概念

地址四级联动是通过级联选择框（Select元素）实现的，用户在选择上一级地址后，下一级地址的选择框会动态更新，仅显示与上一级相关的选项。这通常依赖于预先定义好的地址数据结构。

优势

用户体验提升：减少手动输入，降低错误率。
数据标准化：确保地址信息的一致性和准确性。
界面简洁：通过选择框展示，界面更加整洁。

类型

静态数据联动：地址数据在代码中预先定义，适用于地址数据量较小且不经常变动的场景。
动态数据联动：通过API接口获取地址数据，适用于地址数据量大或需要实时更新的场景。

应用场景

用户注册时填写地址信息。
电商平台的收货地址选择。
物流配送系统中的地址管理。

实现示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <select id="street">
        <option value="">请选择街道</option>
    </select>

    <script>
        const data = {
            "province1": {
                "city1": {
                    "district1": ["street1", "street2"],
                    "district2": ["street3"]
                },
                "city2": {
                    "district3": ["street4"]
                }
            },
            "province2": {
                // 更多数据...
            }
        };

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

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

        // 省份改变时更新城市
        provinceSelect.addEventListener('change', function() {
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            streetSelect.innerHTML = '<option value="">请选择街道</option>';
            let province = this.value;
            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() {
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            streetSelect.innerHTML = '<option value="">请选择街道</option>';
            let province = provinceSelect.value;
            let city = this.value;
            if (city) {
                for (let district in data[province][city]) {
                    let option = document.createElement('option');
                    option.value = district;
                    option.text = district;
                    districtSelect.appendChild(option);
                }
            }
        });

        // 区县改变时更新街道
        districtSelect.addEventListener('change', function() {
            streetSelect.innerHTML = '<option value="">请选择街道</option>';
            let province = provinceSelect.value;
            let city = citySelect.value;
            let district = this.value;
            if (district) {
                data[province][city][district].forEach(street => {
                    let option = document.createElement('option');
                    option.value = street;
                    option.text = street;
                    streetSelect.appendChild(option);
                });
            }
        });
    </script>
</body>
</html>