js实现三级级联
三级级联实现方法
三级级联通常指三个层级的下拉菜单，后一级的选项内容根据前一级的选择动态变化。以下是使用JavaScript实现三级级联的完整方案。
数据结构准备
假设三级级联的数据结构如下，存储省、市、区的关系：
const regionData = {
"江苏省": {
"南京市": ["玄武区", "鼓楼区", "秦淮区"],
"苏州市": ["姑苏区", "虎丘区", "吴中区"]
},
"浙江省": {
"杭州市": ["上城区", "下城区", "江干区"],
"宁波市": ["海曙区", "江北区", "镇海区"]
}
};HTML结构
创建三个select元素，分别对应省、市、区：
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>JavaScript实现
初始化省份下拉框：
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const districtSelect = document.getElementById('district');
// 初始化省份选项
Object.keys(regionData).forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
});省份变化时加载城市：
provinceSelect.addEventListener('change', function() {
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区县</option>';
const selectedProvince = this.value;
if (selectedProvince) {
Object.keys(regionData[selectedProvince]).forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});城市变化时加载区县：
citySelect.addEventListener('change', function() {
districtSelect.innerHTML = '<option value="">请选择区县</option>';
const selectedProvince = provinceSelect.value;
const selectedCity = this.value;
if (selectedProvince && selectedCity) {
regionData[selectedProvince][selectedCity].forEach(district => {
const option = document.createElement('option');
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
}
});完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>三级级联示例</title>
</head>
<body>
<select id="province"></select>
<select id="city"></select>
<select id="district"></select>
<script>
const regionData = {
"江苏省": {
"南京市": ["玄武区", "鼓楼区", "秦淮区"],
"苏州市": ["姑苏区", "虎丘区", "吴中区"]
},
"浙江省": {
"杭州市": ["上城区", "下城区", "江干区"],
"宁波市": ["海曙区", "江北区", "镇海区"]
}
};
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const districtSelect = document.getElementById('district');
// 初始化省份
provinceSelect.innerHTML = '<option value="">请选择省份</option>';
Object.keys(regionData).forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
});
// 省份变化事件
provinceSelect.addEventListener('change', function() {
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区县</option>';
const selectedProvince = this.value;
if (selectedProvince) {
Object.keys(regionData[selectedProvince]).forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});
// 城市变化事件
citySelect.addEventListener('change', function() {
districtSelect.innerHTML = '<option value="">请选择区县</option>';
const selectedProvince = provinceSelect.value;
const selectedCity = this.value;
if (selectedProvince && selectedCity) {
regionData[selectedProvince][selectedCity].forEach(district => {
const option = document.createElement('option');
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
}
});
</script>
</body>
</html>动态加载数据方案
如果需要从服务器动态获取数据，可以使用fetch API：
async function loadCities(province) {
const response = await fetch(`/api/cities?province=${province}`);
return await response.json();
}
provinceSelect.addEventListener('change', async function() {
const cities = await loadCities(this.value);
// 更新城市下拉框...
});注意事项
- 确保在用户选择前一级选项后，再加载下一级选项
- 每次上级选项变化时，需要清空下级所有选项
- 添加默认空选项提升用户体验
- 考虑添加加载状态提示，特别是网络请求时
