省市级三级联动通常指的是在用户界面上，用户可以通过选择省份，然后基于所选择的省份选择对应的城市，最后基于所选择的城市选择对应的区县。这种联动效果在很多应用中都有出现，例如电商平台的收货地址选择、政务服务的地区选择等。
下面是一个使用JSON假数据实现省市级三级联动功能的示例。
JSON假数据
首先，我们需要构造一组包含省份、城市和区县信息的JSON假数据。
json
{
"provinces": [
{
"id": 1,
"name": "广东省",
"cities": [
{
"id": 1,
"name": "广州市",
"districts": [
{
"id": 1,
"name": "天河区"
},
{
"id": 2,
"name": "越秀区"
}
]
},
{
"id": 2,
"name": "深圳市",
"districts": [
{
"id": 3,
"name": "福田区"
},
{
"id": 4,
"name": "南山区"
}
]
}
]
},
{
"id": 2,
"name": "浙江省",
"cities": [
{
"id": 3,
"name": "杭州市",
"districts": [
{
"id": 5,
"name": "西湖区"
},
{
"id": 6,
"name": "拱墅区"
}
]
}
]
}
]
}具体代码与思路
1. 数据准备
将上述JSON数据保存在一个文件中，例如areas.json，然后在前端代码中通过AJAX请求或其他方式加载这个数据。
2. 前端页面结构
通常，我们会使用三个<select>元素来表示省份、城市和区县的选择框。
html
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>3. 初始化与数据绑定
当页面加载时，首先加载JSON数据。
根据加载的数据，动态生成省份的<option>元素，并绑定到省份的<select>元素上。
为省份的<select>元素添加change事件监听器，当用户选择省份时，根据所选省份动态生成城市的<option>元素，并绑定到城市的<select>元素上。
同样地，为城市的<select>元素添加change事件监听器，当用户选择城市时，根据所选城市动态生成区县的<option>元素，并绑定到区县的<select>元素上。
4. 示例代码（使用jQuery）
这里是一个使用jQuery实现的简单示例：
javascript
const data = {
"provinces": [
{ "id": 1, "name": "省份1", "cities": [
{ "id": 11, "name": "城市1", "districts": [
{ "id": 111, "name": "区县1" },
{ "id": 112, "name": "区县2" }
] },
{ "id": 12, "name": "城市2", "districts": [
{ "id": 121, "name": "区县3" },
{ "id": 122, "name": "区县4" }
] }
] },
{ "id": 2, "name": "省份2", "cities": [ /* ... */ ] }
]
};
HTML 结构
接下来，我们需要在 HTML 中创建三个下拉框，分别用于选择省份、城市和区县。
html
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>
JavaScript 代码
现在，我们编写 JavaScript 代码来填充这些下拉框，并实现联动效果。
javascript
// 填充省份下拉框
const provinceSelect = document.getElementById('province');
data.provinces.forEach(province => {
const option = document.createElement('option');
option.value = province.id;
option.text = province.name;
provinceSelect.appendChild(option);
});
// 监听省份下拉框的变化，并更新城市和区县下拉框
provinceSelect.addEventListener('change', function() {
const selectedProvinceId = this.value;
const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));
updateCitySelect(selectedProvince.cities);
clearDistrictSelect();
});
// 填充城市下拉框
function updateCitySelect(cities) {
const citySelect = document.getElementById('city');
citySelect.innerHTML = ''; // 清空之前的选项
cities.forEach(city => {
const option = document.createElement('option');
option.value = city.id;
option.text = city.name;
citySelect.appendChild(option);
});
// 触发一次城市下拉框的变化，以更新区县下拉框（如果已经有默认选中的城市）
if (citySelect.options.length > 0) {
citySelect.dispatchEvent(new Event('change'));
}
}
// 监听城市下拉框的变化，并更新区县下拉框
const citySelect = document.getElementById('city');
citySelect.addEventListener('change', function() {
const selectedCityId = this.value;
const selectedProvinceId = provinceSelect.value;
const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));
const selectedCity = selectedProvince.cities.find(c => c.id === parseInt(selectedCityId));
updateDistrictSelect(selectedCity.districts);
});
// 填充区县下拉框
function updateDistrictSelect(districts) {
const districtSelect = document.getElementById('district');
districtSelect.innerHTML = ''; // 清空之前的选项
districts.forEach(district => {
const option = document.createElement('option');
option.value = district.id;
option.text = district.name;
districtSelect.appendChild(option);
});
}
// 清空区县下拉框的选项
function clearDistrictSelect() {
const districtSelect = document.getElementById('district');
districtSelect.innerHTML = ''; // 清空之前的选项
}这个示例代码实现了基于假数据的三级联动下拉框。当用户选择省份时，城市下拉框会更新为所选省份下的城市列表；当用户选择城市时，区县下拉框会更新为所选城市下的区县列表。注意，这个示例仅用于演示基本思路，实际应用中可能需要更复杂的逻辑和错误处理。
