js级联实现
级联选择器的实现方法
级联选择器（Cascading Dropdown）通常用于多层级联的数据选择场景，例如省市区三级联动。以下是几种常见的实现方式：
基于纯JavaScript的实现
// 假设有三个select元素：province, city, district
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const districtSelect = document.getElementById('district');
// 数据源（实际应用中可能来自API）
const data = {
'北京': ['东城区', '西城区', '朝阳区'],
'上海': ['黄浦区', '徐汇区', '长宁区']
};
// 省份变化时触发
provinceSelect.addEventListener('change', function() {
const selectedProvince = this.value;
citySelect.innerHTML = '<option value="">请选择城市</option>';
districtSelect.innerHTML = '<option value="">请选择区县</option>';
if (selectedProvince && data[selectedProvince]) {
data[selectedProvince].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});
// 城市变化时触发
citySelect.addEventListener('change', function() {
// 这里可以添加区县数据加载逻辑
});基于jQuery的实现
$(document).ready(function() {
$('#province').change(function() {
const province = $(this).val();
$('#city').empty().append('<option value="">请选择城市</option>');
$('#district').empty().append('<option value="">请选择区县</option>');
if (province) {
// 实际应用中这里可能是AJAX请求
const cities = data[province];
$.each(cities, function(index, city) {
$('#city').append($('<option>', {
value: city,
text: city
}));
});
}
});
});基于Vue的实现
new Vue({
el: '#app',
data: {
provinces: ['北京', '上海'],
cities: [],
districts: [],
selectedProvince: '',
selectedCity: ''
},
watch: {
selectedProvince(newVal) {
this.cities = newVal ? data[newVal] : [];
this.selectedCity = '';
this.districts = [];
},
selectedCity(newVal) {
// 这里可以处理区县数据加载
}
}
});基于React的实现
function CascadingDropdown() {
const [province, setProvince] = useState('');
const [cities, setCities] = useState([]);
const [city, setCity] = useState('');
const handleProvinceChange = (e) => {
const selected = e.target.value;
setProvince(selected);
setCities(selected ? data[selected] : []);
setCity('');
};
return (
<div>
<select value={province} onChange={handleProvinceChange}>
<option value="">请选择省份</option>
{Object.keys(data).map(p => (
<option key={p} value={p}>{p}</option>
))}
</select>
<select value={city} onChange={(e) => setCity(e.target.value)}>
<option value="">请选择城市</option>
{cities.map(c => (
<option key={c} value={c}>{c}</option>
))}
</select>
</div>
);
}实现注意事项
-
数据加载方式可以根据实际需求选择：
- 前端预加载所有数据
- 通过AJAX按需加载下级数据
- 使用WebSocket实时获取数据
-
用户体验优化：
- 添加默认选项（如"请选择..."）
- 清空下级选择器当上级变更时
- 添加加载状态提示
-
性能考虑：
- 大数据量时考虑虚拟滚动
- 频繁变更时考虑防抖处理
-
错误处理：
- 网络请求失败时的降级处理
- 数据格式验证
后端API设计建议
通常级联选择器需要后端配合提供API，常见的RESTful设计：
GET /api/provinces - 获取所有省份
GET /api/cities?province=北京 - 获取某省份下的城市
GET /api/districts?city=朝阳区 - 获取某城市下的区县响应格式建议：
{
"code": 0,
"data": [
{"value": "110101", "label": "东城区"},
{"value": "110102", "label": "西城区"}
]
}
