js 实现级联
级联选择实现方法
在JavaScript中实现级联选择通常涉及监听上级选择变化后动态更新下级选项。以下是常见实现方式：
基于事件监听的数据驱动
// 数据示例
const regionData = {
'华东': ['上海', '南京', '杭州'],
'华北': ['北京', '天津', '石家庄']
};
// 获取DOM元素
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
// 省级选择变化事件
provinceSelect.addEventListener('change', function() {
const selectedProvince = this.value;
citySelect.innerHTML = '<option value="">请选择城市</option>';
if (selectedProvince) {
regionData[selectedProvince].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});使用框架实现（Vue示例）
new Vue({
el: '#app',
data: {
provinces: ['华东', '华北'],
cities: [],
selectedProvince: '',
selectedCity: ''
},
watch: {
selectedProvince(newVal) {
this.cities = regionData[newVal] || [];
this.selectedCity = '';
}
}
});动态加载远程数据
async function loadCities(provinceId) {
const response = await fetch(`/api/cities?province=${provinceId}`);
return await response.json();
}
provinceSelect.addEventListener('change', async function() {
citySelect.disabled = true;
const cities = await loadCities(this.value);
citySelect.innerHTML = cities.map(city =>
`<option value="${city.id}">${city.name}</option>`
).join('');
citySelect.disabled = false;
});实现注意事项
- 初始状态需禁用下级选择器
- 清除下级选项前应保留默认提示选项
- 考虑添加加载状态提示
- 对于多层级联可采用递归方式处理
- 移动端需优化触摸交互体验
性能优化建议
- 对静态数据可进行前端缓存
- 使用防抖处理频繁请求
- 大数据量采用虚拟滚动
- 可预先加载部分下级数据
