当前位置：首页 > JavaScript

js实现联动式

2026-02-03 00:08:26JavaScript

联动式实现的常见方法

联动式通常指多个下拉菜单或表单元素之间的动态关联，例如选择省份后城市下拉菜单自动更新。以下是几种实现方式：

基于事件监听的数据绑定

通过监听父级下拉菜单的变化事件，动态更新子级菜单的选项：

js实现联动式

// 假设省份和城市数据
const provinceData = {
  '北京': ['朝阳区', '海淀区'],
  '上海': ['浦东新区', '静安区']
};

document.getElementById('province').addEventListener('change', function() {
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = ''; // 清空现有选项

  const selectedProvince = this.value;
  if (selectedProvince) {
    provinceData[selectedProvince].forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
});

使用框架实现（以Vue为例）

现代前端框架提供了更简洁的数据绑定方式：

js实现联动式

<template>
  <select v-model="selectedProvince">
    <option v-for="province in provinces" :value="province">
      {{ province }}
    </option>
  </select>

  <select v-model="selectedCity">
    <option v-for="city in cities" :value="city">
      {{ city }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      provinces: ['北京', '上海'],
      cities: []
    }
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = this.getCitiesByProvince(newVal);
    }
  },
  methods: {
    getCitiesByProvince(province) {
      // 返回对应城市数组
    }
  }
}
</script>

使用AJAX动态加载数据

当联动数据需要从服务器获取时：

document.getElementById('category').addEventListener('change', function() {
  const categoryId = this.value;
  fetch(`/api/subcategories?category=${categoryId}`)
    .then(response => response.json())
    .then(data => {
      const subcategorySelect = document.getElementById('subcategory');
      subcategorySelect.innerHTML = '';
      data.forEach(item => {
        const option = document.createElement('option');
        option.value = item.id;
        option.textContent = item.name;
        subcategorySelect.appendChild(option);
      });
    });
});

实现注意事项

初始状态处理：确保子级菜单在父级未选择时处于禁用状态
数据缓存：频繁使用的数据可以考虑前端缓存
错误处理：网络请求需要添加错误处理逻辑
性能优化：大数据量时考虑虚拟滚动或分页加载

复杂联动场景

对于多级联动（如省-市-区），可以采用递归或组合模式：

class LinkedSelect {
  constructor(parentSelect, childSelect, dataSource) {
    this.parent = parentSelect;
    this.child = childSelect;
    this.dataSource = dataSource;

    this.parent.addEventListener('change', this.updateChild.bind(this));
  }

  updateChild() {
    const parentValue = this.parent.value;
    this.child.innerHTML = '';

    if (parentValue) {
      this.dataSource[parentValue].forEach(item => {
        const option = new Option(item.name, item.value);
        this.child.add(option);
      });
    }
  }
}

这种模式可以创建多个实例形成联动链。

标签: js