实现省市区三级联动js

实现省市区三级联动是一个常见的前端开发任务，通常用于表单中选择地址的场景。下面我将详细介绍这个功能的基础概念、优势、类型、应用场景以及如何实现。

基础概念

省市区三级联动是指通过三个下拉菜单（或选择框）分别选择省份、城市和区县，这三个选择框之间存在依赖关系：选择省份后，城市选择框会显示该省份下的所有城市；选择城市后，区县选择框会显示该城市下的所有区县。

优势

用户体验：用户可以直接从下拉菜单中选择地址，操作简便直观。
数据准确性：通过联动机制，确保用户选择的地址层级关系正确。
减少输入错误：避免了手动输入地址可能带来的拼写错误或格式错误。

类型

静态数据：使用预先定义好的省市区数据。
动态数据：通过API从服务器获取实时数据。

应用场景

电商平台的收货地址选择
注册页面的用户地址填写
物流配送系统的地址管理

实现方法

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

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部分（data.js）

const data = {
    "北京市": {
        "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
    },
    "上海市": {
        "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
    },
    // 其他省份和城市数据...
};

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 in data) {
        const option = document.createElement('option');
        option.value = province;
        option.textContent = province;
        provinceSelect.appendChild(option);
    }

    // 省份选择变化事件
    provinceSelect.addEventListener('change', function() {
        const selectedProvince = this.value;
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (selectedProvince) {
            for (const city in data[selectedProvince]) {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                citySelect.appendChild(option);
            }
        }
    });

    // 城市选择变化事件
    citySelect.addEventListener('change', function() {
        const selectedProvince = provinceSelect.value;
        const selectedCity = this.value;
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (selectedCity) {
            data[selectedProvince][selectedCity].forEach(district => {
                const option = document.createElement('option');
                option.value = district;
                option.textContent = district;
                districtSelect.appendChild(option);
            });
        }
    });
});