当前位置：首页 > JavaScript

js实现级联

2026-03-14 17:59:34JavaScript

实现级联的基本思路

级联通常指根据用户选择的上一个选项动态加载下一个选项的数据。常见场景包括省市区三级联动、商品分类多级选择等。

数据结构设计

采用嵌套对象或数组存储级联数据：

const regionData = [
  {
    id: 1,
    name: '北京',
    children: [
      {
        id: 11,
        name: '海淀区',
        children: [...]
      }
    ]
  }
]

前端实现方案

HTML结构

<select id="province"></select>
<select id="city"></select>
<select id="district"></select>

JavaScript核心逻辑

// 初始化省份下拉框
function initProvince() {
  const provinceSelect = document.getElementById('province');
  regionData.forEach(province => {
    const option = document.createElement('option');
    option.value = province.id;
    option.textContent = province.name;
    provinceSelect.appendChild(option);
  });
}

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

  const selectedProvinceId = this.value;
  const province = regionData.find(p => p.id == selectedProvinceId);

  if (province && province.children) {
    province.children.forEach(city => {
      const option = document.createElement('option');
      option.value = city.id;
      option.textContent = city.name;
      citySelect.appendChild(option);
    });
  }
});

异步数据加载方案

当数据量较大时，建议采用异步加载方式：

async function loadCities(provinceId) {
  const response = await fetch(`/api/cities?provinceId=${provinceId}`);
  return await response.json();
}

document.getElementById('province').addEventListener('change', async function() {
  const cities = await loadCities(this.value);
  // 渲染城市下拉框...
});