当前位置：首页 > JavaScript

js实现联动

2026-02-02 04:37:09JavaScript

JavaScript 实现联动效果

联动效果通常指两个或多个下拉菜单、输入框等元素之间的动态关联，常见于省市区选择、分类筛选等场景。以下是几种实现方式：

基于事件监听的基础联动

通过监听第一个下拉菜单的change事件，动态更新第二个下拉菜单的选项：

js实现联动

// HTML结构示例
// <select id="province"></select>
// <select id="city"></select>

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');

// 省份数据
const data = {
  '江苏': ['南京', '苏州', '无锡'],
  '浙江': ['杭州', '宁波', '温州']
};

// 初始化省份选项
Object.keys(data).forEach(province => {
  const option = document.createElement('option');
  option.value = province;
  option.textContent = province;
  provinceSelect.appendChild(option);
});

// 联动逻辑
provinceSelect.addEventListener('change', function() {
  // 清空城市选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';

  // 获取当前选中省份
  const selectedProvince = this.value;

  // 添加对应城市选项
  if (selectedProvince && data[selectedProvince]) {
    data[selectedProvince].forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
});

使用数据绑定框架（Vue示例）

现代前端框架可以更简洁地实现联动：

// Vue组件示例
new Vue({
  el: '#app',
  data: {
    selectedProvince: '',
    selectedCity: '',
    provinces: ['江苏', '浙江'],
    cities: [],
    cityData: {
      '江苏': ['南京', '苏州', '无锡'],
      '浙江': ['杭州', '宁波', '温州']
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = this.cityData[newVal] || [];
      this.selectedCity = '';
    }
  }
});

对应HTML模板：

js实现联动

<div id="app">
  <select v-model="selectedProvince">
    <option value="">请选择省份</option>
    <option v-for="p in provinces" :value="p">{{ p }}</option>
  </select>

  <select v-model="selectedCity">
    <option value="">请选择城市</option>
    <option v-for="c in cities" :value="c">{{ c }}</option>
  </select>
</div>

多级联动实现

对于三级联动（如省市区），可采用递归或嵌套数据结构：

const threeLevelData = {
  '华东': {
    '江苏': ['南京', '苏州'],
    '浙江': ['杭州', '宁波']
  },
  '华北': {
    '北京': ['朝阳区', '海淀区'],
    '天津': ['和平区', '河西区']
  }
};

// 实现逻辑与二级联动类似，增加一级监听

异步数据加载

当联动数据需要从后端获取时：

document.getElementById('province').addEventListener('change', async function() {
  const provinceId = this.value;
  const citySelect = document.getElementById('city');

  try {
    const response = await fetch(`/api/cities?province=${provinceId}`);
    const cities = await response.json();

    citySelect.innerHTML = cities.map(city => 
      `<option value="${city.id}">${city.name}</option>`
    ).join('');
  } catch (error) {
    console.error('获取城市数据失败', error);
  }
});