js实现联动效果
实现联动效果的 JavaScript 方法
联动效果通常指两个或多个下拉菜单（或元素）之间的动态关联，即一个选项的变化会影响另一个选项的内容。以下是几种常见的实现方式：
基于事件监听与数据绑定
通过监听第一个下拉菜单的change事件，动态更新第二个下拉菜单的选项：
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
// 数据映射（示例）
const data = {
'北京': ['朝阳区', '海淀区', '东城区'],
'上海': ['浦东新区', '徐汇区', '静安区']
};
provinceSelect.addEventListener('change', function() {
const selectedProvince = this.value;
citySelect.innerHTML = ''; // 清空原有选项
if (selectedProvince && data[selectedProvince]) {
data[selectedProvince].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});使用框架实现（Vue 示例）
现代前端框架通过响应式数据自动处理联动逻辑：
new Vue({
el: '#app',
data: {
selectedProvince: '',
provinces: ['北京', '上海'],
cities: []
},
watch: {
selectedProvince(newVal) {
this.cities = newVal ? data[newVal] : [];
}
}
});动态数据加载（AJAX 方式）
当选项数据需要从后端获取时，可使用异步请求：
document.getElementById('category').addEventListener('change', async function() {
const response = await fetch(`/api/subcategories?parent=${this.value}`);
const subcategories = await response.json();
const subcatSelect = document.getElementById('subcategory');
subcatSelect.innerHTML = subcategories.map(item =>
`<option value="${item.id}">${item.name}</option>`
).join('');
});多级联动封装
对于多级联动（如省-市-区），可封装为通用函数：
function createChainSelect(primarySelect, targetSelect, dataMap) {
primarySelect.addEventListener('change', () => {
const value = primarySelect.value;
targetSelect.innerHTML = dataMap[value]
? dataMap[value].map(item => `<option value="${item}">${item}</option>`).join('')
: '';
});
}注意事项
- 初始加载时需要触发一次
change事件以初始化次级菜单 - 对于动态数据需考虑加载状态和错误处理
- 移动端需兼顾触摸事件兼容性
- 复杂场景可考虑使用现成的插件（如jQuery Chained）
以上方法可根据具体需求组合使用，核心思路是通过事件驱动数据更新视图。
