js省市县三级联动详解

省市县三级联动是一种常见的前端交互功能，它允许用户在选择省份后，自动加载对应的城市列表，再根据选择的城市加载对应的区县列表，从而实现多级联动效果。以下是基于原生JavaScript实现省市县三级联动的详细步骤和示例代码：

实现原理

省市县三级联动的核心在于通过JavaScript监听下拉框的change事件，根据用户选择的省份或城市动态更新下拉框的内容。这通常涉及到异步请求数据，并将返回的数据填充到相应的下拉框中。

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市县三级联动示例</title>
<script>
// 初始化省市县数据
var provinces = [
    { name: '请选择', code: '' },
    { name: '陕西省', code: 'SN' },
    { name: '河北省', code: 'HE' }
];

var cities = {
    'SN': [
        { name: '西安市', code: 'XA' },
        { name: '宝鸡市', code: 'BA' }
    ],
    'HE': [
        { name: '石家庄市', code: 'ZH' },
        { name: '邢台市', code: 'XT' }
    ]
};

// 监听省份选择变化
document.getElementById('province').onchange = function() {
    var citySelect = document.getElementById('city');
    citySelect.innerHTML = ''; // 清空城市下拉框
    var provinceCode = this.value;
    for (var cityCode in cities[provinceCode]) {
        var option = document.createElement('option');
        option.value = cities[provinceCode][cityCode].code;
        option.innerHTML = cities[provinceCode][cityCode].name;
        citySelect.appendChild(option);
    }
};

// 监听城市选择变化
document.getElementById('city').onchange = function() {
    var countySelect = document.getElementById('county');
    countySelect.innerHTML = ''; // 清空区县下拉框
    var cityCode = this.value;
    for (var countyCode in cities[this.value][countyCode]) {
        var option = document.createElement('option');
        option.value = cities[this.value][countyCode].code;
        option.innerHTML = cities[this.value][countyCode].name;
        countySelect.appendChild(option);
    }
};
</script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="county">
        <option value="">请选择区县</option>
    </select>
</body>
</html>