当前位置：首页 > JavaScript

js实现三级级联

2026-03-01 07:36:00JavaScript

三级级联实现方法

三级级联通常指三个层级的下拉菜单，后一级的选项内容根据前一级的选择动态变化。以下是使用JavaScript实现三级级联的完整方案。

数据结构准备

假设三级级联的数据结构如下，存储省、市、区的关系：

const regionData = {
  "江苏省": {
    "南京市": ["玄武区", "鼓楼区", "秦淮区"],
    "苏州市": ["姑苏区", "虎丘区", "吴中区"]
  },
  "浙江省": {
    "杭州市": ["上城区", "下城区", "江干区"],
    "宁波市": ["海曙区", "江北区", "镇海区"]
  }
};

HTML结构

创建三个select元素，分别对应省、市、区：

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

JavaScript实现

初始化省份下拉框：

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

// 初始化省份选项
Object.keys(regionData).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>';
  districtSelect.innerHTML = '<option value="">请选择区县</option>';

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

城市变化时加载区县：

citySelect.addEventListener('change', function() {
  districtSelect.innerHTML = '<option value="">请选择区县</option>';

  const selectedProvince = provinceSelect.value;
  const selectedCity = this.value;
  if (selectedProvince && selectedCity) {
    regionData[selectedProvince][selectedCity].forEach(district => {
      const option = document.createElement('option');
      option.value = district;
      option.textContent = district;
      districtSelect.appendChild(option);
    });
  }
});

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>三级级联示例</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>
  <select id="district"></select>

  <script>
    const regionData = {
      "江苏省": {
        "南京市": ["玄武区", "鼓楼区", "秦淮区"],
        "苏州市": ["姑苏区", "虎丘区", "吴中区"]
      },
      "浙江省": {
        "杭州市": ["上城区", "下城区", "江干区"],
        "宁波市": ["海曙区", "江北区", "镇海区"]
      }
    };

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

    // 初始化省份
    provinceSelect.innerHTML = '<option value="">请选择省份</option>';
    Object.keys(regionData).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>';
      districtSelect.innerHTML = '<option value="">请选择区县</option>';

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

    // 城市变化事件
    citySelect.addEventListener('change', function() {
      districtSelect.innerHTML = '<option value="">请选择区县</option>';

      const selectedProvince = provinceSelect.value;
      const selectedCity = this.value;
      if (selectedProvince && selectedCity) {
        regionData[selectedProvince][selectedCity].forEach(district => {
          const option = document.createElement('option');
          option.value = district;
          option.textContent = district;
          districtSelect.appendChild(option);
        });
      }
    });
  </script>
</body>
</html>

动态加载数据方案

如果需要从服务器动态获取数据，可以使用fetch API：

js实现三级级联

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

provinceSelect.addEventListener('change', async function() {
  const cities = await loadCities(this.value);
  // 更新城市下拉框...
});