当前位置：首页 > JavaScript

js实现联动效果

2026-01-30 23:08:58JavaScript

联动效果的实现方法

联动效果通常指两个或多个下拉菜单、表单元素之间的动态关联，例如选择省份后自动加载对应的城市列表。以下是几种常见的实现方式：

使用事件监听和数据绑定

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

js实现联动效果

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

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

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示例）

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

js实现联动效果

new Vue({
  el: '#app',
  data: {
    provinces: ['江苏', '浙江'],
    cities: [],
    selectedProvince: '',
    selectedCity: ''
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = newVal ? this.getCities(newVal) : [];
      this.selectedCity = '';
    }
  },
  methods: {
    getCities(province) {
      const cityData = {
        '江苏': ['南京', '苏州', '无锡'],
        '浙江': ['杭州', '宁波', '温州']
      };
      return cityData[province] || [];
    }
  }
});

使用AJAX动态加载数据

当数据量较大时，可以通过AJAX从服务器获取联动数据：

document.getElementById('category').addEventListener('change', function() {
  const categoryId = this.value;
  const subcategorySelect = document.getElementById('subcategory');

  if (categoryId) {
    fetch(`/api/subcategories?category=${categoryId}`)
      .then(response => response.json())
      .then(data => {
        subcategorySelect.innerHTML = data.map(item => 
          `<option value="${item.id}">${item.name}</option>`
        ).join('');
      });
  } else {
    subcategorySelect.innerHTML = '<option value="">请先选择分类</option>';
  }
});

多级联动实现

对于三级或更多级联动的场景，可以采用递归或嵌套的方式处理：

class CascadeSelect {
  constructor(selectElements, dataSource) {
    this.selects = Array.from(selectElements);
    this.dataSource = dataSource;
    this.init();
  }

  init() {
    this.selects.forEach((select, index) => {
      select.addEventListener('change', () => this.updateNextSelects(index));
      if (index === 0) this.loadOptions(select, this.dataSource);
    });
  }

  updateNextSelects(changedIndex) {
    const currentSelect = this.selects[changedIndex];
    const nextSelect = this.selects[changedIndex + 1];

    if (!nextSelect) return;

    const selectedValue = currentSelect.value;
    const nextData = this.getNextLevelData(selectedValue);

    this.loadOptions(nextSelect, nextData);
    nextSelect.dispatchEvent(new Event('change'));
  }

  loadOptions(select, options) {
    select.innerHTML = options 
      ? options.map(opt => `<option value="${opt.value}">${opt.label}</option>`).join('')
      : '<option value="">请选择</option>';
  }

  getNextLevelData(currentValue) {
    // 实现根据当前值获取下一级数据的逻辑
    // 可以是本地数据或API请求
  }
}