当前位置：首页 > JavaScript

js级联实现

2026-02-01 07:00:51JavaScript

级联的实现方法

在JavaScript中实现级联效果通常涉及动态更新下拉菜单选项，基于前一个下拉菜单的选择。以下是常见的实现方式：

使用事件监听器

document.getElementById('province').addEventListener('change', function() {
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = '<option value="">请选择城市</option>';

  if (this.value === 'jiangsu') {
    const cities = ['南京', '苏州', '无锡'];
    cities.forEach(city => {
      citySelect.add(new Option(city, city));
    });
  }
});

数据存储方式

可以将级联数据存储在对象中：

const cascadeData = {
  jiangsu: ['南京', '苏州', '无锡'],
  zhejiang: ['杭州', '宁波', '温州']
};

document.getElementById('province').addEventListener('change', function() {
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = '';

  if (this.value in cascadeData) {
    cascadeData[this.value].forEach(city => {
      citySelect.add(new Option(city, city));
    });
  }
});

AJAX动态加载

对于大量数据可以考虑异步加载：

document.getElementById('province').addEventListener('change', function() {
  fetch(`/api/cities?province=${this.value}`)
    .then(response => response.json())
    .then(cities => {
      const citySelect = document.getElementById('city');
      citySelect.innerHTML = '';
      cities.forEach(city => {
        citySelect.add(new Option(city.name, city.id));
      });
    });
});

使用框架实现

在Vue中可以使用v-model和计算属性：

new Vue({
  el: '#app',
  data: {
    province: '',
    cities: []
  },
  watch: {
    province(newVal) {
      this.cities = cascadeData[newVal] || [];
    }
  }
});

在React中可以使用状态管理：

js级联实现

function CascadeSelect() {
  const [province, setProvince] = useState('');
  const [cities, setCities] = useState([]);

  const handleProvinceChange = (e) => {
    setProvince(e.target.value);
    setCities(cascadeData[e.target.value] || []);
  };

  return (
    <>
      <select value={province} onChange={handleProvinceChange}>
        <option value="">选择省份</option>
        {Object.keys(cascadeData).map(p => (
          <option key={p} value={p}>{p}</option>
        ))}
      </select>
      <select>
        <option value="">选择城市</option>
        {cities.map(city => (
          <option key={city} value={city}>{city}</option>
        ))}
      </select>
    </>
  );
}