js 实现级联
级联选择实现方法
数据准备
数据结构通常采用嵌套对象或数组形式，例如：
const data = [
{
value: 'province1',
label: '省份1',
children: [
{
value: 'city1',
label: '城市1',
children: [
{ value: 'district1', label: '区县1' }
]
}
]
}
]动态渲染实现
通过事件监听和DOM操作实现级联更新：
function renderCascade(container, data, level = 0) {
const select = document.createElement('select');
select.addEventListener('change', (e) => {
const nextContainer = document.getElementById(`level-${level+1}`);
if(nextContainer) nextContainer.innerHTML = '';
const selected = data.find(item => item.value === e.target.value);
if(selected && selected.children) {
const newContainer = document.createElement('div');
newContainer.id = `level-${level+1}`;
container.parentNode.appendChild(newContainer);
renderCascade(newContainer, selected.children, level+1);
}
});
data.forEach(item => {
const option = document.createElement('option');
option.value = item.value;
option.textContent = item.label;
select.appendChild(option);
});
container.appendChild(select);
}使用框架实现（Vue示例）
基于Vue的响应式特性简化实现：
<template>
<div v-for="(select, index) in selects" :key="index">
<select v-model="selectedValues[index]" @change="loadNext(index)">
<option v-for="item in select.options" :value="item.value">
{{ item.label }}
</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selects: [{ options: [] }],
selectedValues: []
}
},
methods: {
loadNext(index) {
this.selects = this.selects.slice(0, index+1);
const current = this.findNode(this.selectedValues);
if(current && current.children) {
this.selects.push({
options: current.children
});
}
}
}
}
</script>性能优化建议
避免每次重新渲染整个级联组件，应该：
- 使用虚拟DOM或差异化更新
- 对大数据集采用分页加载
- 实现缓存机制存储已加载数据
典型应用场景
- 省市区三级联动选择
- 商品分类多级筛选
- 组织架构树形选择
实现时需注意处理异步数据加载、默认值设置和表单验证等常见需求。根据具体项目需求，可选择纯DOM操作或框架方案实现。
