js实现联动效果
联动效果实现方法
联动效果通常指多个下拉菜单或输入框之间的动态关联，例如选择省份后城市下拉菜单自动更新。以下是几种常见实现方式：
基于事件监听的联动
通过监听父级元素变化事件触发子级元素更新：
// 省份和城市数据
const data = {
'北京': ['朝阳区', '海淀区', '西城区'],
'上海': ['浦东新区', '静安区', '黄浦区']
};
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) {
data[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 = data[newVal] || [];
this.selectedCity = '';
}
}
});多级联动实现
对于三级以上联动（如省-市-区），可采用递归或链式调用：
function updateDependentSelect(parentSelect, childSelect, dataMap) {
const parentValue = parentSelect.value;
childSelect.innerHTML = '';
if (parentValue && dataMap[parentValue]) {
dataMap[parentValue].forEach(item => {
const option = new Option(item, item);
childSelect.add(option);
});
}
}
// 初始化所有联动关系
const relations = [
{ parent: '#province', child: '#city', data: provinceCityData },
{ parent: '#city', child: '#district', data: cityDistrictData }
];
relations.forEach(({parent, child, data}) => {
document.querySelector(parent).addEventListener('change', () => {
updateDependentSelect(
document.querySelector(parent),
document.querySelector(child),
data
);
});
});动态数据加载联动
当数据需要从后端获取时：
async function loadCities(provinceId) {
const response = await fetch(`/api/cities?province=${provinceId}`);
return response.json();
}
document.getElementById('province').addEventListener('change', async function() {
const cities = await loadCities(this.value);
const citySelect = document.getElementById('city');
citySelect.innerHTML = cities.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
});注意事项
- 初始化时应设置默认选项（如"请选择"）
- 清除子级选项时需保留占位选项
- 对于动态加载数据需要添加加载状态提示
- 移动端需考虑触摸事件兼容性
以上方法可根据具体需求组合使用，数据量较小时推荐前端静态数据处理，数据量大或动态性强时建议采用后端接口方式。
