js三级地址联动源码

三级地址联动通常指的是在前端页面上实现省、市、区三级行政区划的下拉菜单联动效果。以下是一个简单的JavaScript实现示例：

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

JavaScript部分（main.js）

这个文件负责处理联动逻辑。

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

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

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

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

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

        if (selectedCity) {
            let districts = addressData[selectedProvince][selectedCity];
            for (let district of districts) {
                let option = document.createElement('option');
                option.value = district;
                option.textContent = district;
                districtSelect.appendChild(option);
            }
        }
    });
});