原生JavaScript实现的简单省市县三级联动功能示例

下面是详细的攻略：

简介

本攻略讲解的是如何用原生 JavaScript 实现简单的省市县三级联动功能。本文示例展示了如何根据选择的省市联动获取该市所有的区县，并支持手动模拟触发省市变化的事件以更新区县列表。

实现

HTML 结构

首先，我们需要定义一个 HTML 结构来展示省市县三级联动：

<!--省份-->
<select id="province">
  <option>Select Province</option>
</select>

<!--城市-->
<select id="city">
  <option>Select City</option>
</select>

<!--区县-->
<select id="county">
  <option>Select County</option>
</select>

其中，三个 select 元素分别用 id 为 province、city、county 进行了标识，这里的 option 默认选项用于展示初始状态。

数据源

再来，我们需要定义一份数据源，包含全国各个省市县的信息，这里为了方便示例，我们只定义几个数据项：

var provinceList = [{
  province_name: '广东省',
  city_list: [{
    city_name: '广州市',
    county_list: [{
      county_name: '荔湾区'
    }, {
      county_name: '海珠区'
    }]
  }, {
    city_name: '深圳市',
    county_list: [{
      county_name: '南山区'
    }, {
      county_name: '福田区'
    }]
  }]
}, {
  province_name: '湖南省',
  city_list: [{
    city_name: '长沙市',
    county_list: [{
      county_name: '岳麓区'
    }, {
      county_name: '开福区'
    }]
  }, {
    city_name: '株洲市',
    county_list: [{
      county_name: '天元区'
    }, {
      county_name: '荷塘区'
    }]
  }]
}];

这里定义了两个省份（广东、湖南），每个省份中包含若干个城市及其对应的区县。

事件绑定

接下来，我们需要定义一个函数用于根据选择的省市，更新县区列表，同时需要在 HTML 结构初始化完成后，初始化省份列表。

// 获取数据源中某一省份的城市列表
function getCityListByProvince(province_name) {
  var cityList = [];
  for (var i = 0; i < provinceList.length; i++) {
    if (provinceList[i].province_name === province_name) {
      cityList = provinceList[i].city_list;
      break;
    }
  }
  return cityList;
}

// 获取数据源中某一城市的区县列表
function getCountyListByCity(province_name, city_name) {
  var countyList = [];
  for (var i = 0; i < provinceList.length; i++) {
    if (provinceList[i].province_name === province_name) {
      for (var j = 0; j < provinceList[i].city_list.length; j++) {
        if (provinceList[i].city_list[j].city_name === city_name) {
          countyList = provinceList[i].city_list[j].county_list;
          break;
        }
      }
      break;
    }
  }
  return countyList;
}

// 根据省份更新城市列表
function updateCityList() {
  var province = document.getElementById('province');
  var city = document.getElementById('city');
  var province_name = province.options[province.selectedIndex].value;
  var cityList = getCityListByProvince(province_name);
  // 清空城市列表
  city.options.length = 0;
  // 添加城市选项
  for (var i = 0; i < cityList.length; i++) {
    var option = document.createElement('option');
    option.text = cityList[i].city_name;
    option.value = cityList[i].city_name;
    city.appendChild(option);
  }
  // 更新区县列表
  updateCountyList();
}

// 根据城市更新区县列表
function updateCountyList() {
  var province = document.getElementById('province');
  var city = document.getElementById('city');
  var county = document.getElementById('county');
  var province_name = province.options[province.selectedIndex].value;
  var city_name = city.options[city.selectedIndex].value;
  var countyList = getCountyListByCity(province_name, city_name);
  // 清空区县列表
  county.options.length = 0;
  // 添加区县选项
  for (var i = 0; i < countyList.length; i++) {
    var option = document.createElement('option');
    option.text = countyList[i].county_name;
    option.value = countyList[i].county_name;
    county.appendChild(option);
  }
}

// 初始化省份列表
function initProvinceList() {
  var province = document.getElementById('province');
  for (var i = 0; i < provinceList.length; i++) {
    var option = document.createElement('option');
    option.text = provinceList[i].province_name;
    option.value = provinceList[i].province_name;
    province.appendChild(option);
  }
  // 绑定省份列表选择事件
  province.onchange = function () {
    updateCityList();
  };
  // 初始化城市列表
  updateCityList();
}

// 手动模拟触发省份变化事件（仅作演示用）
function changeProvince() {
  var province = document.getElementById('province');
  var city = document.getElementById('city');
  var county = document.getElementById('county');
  // 选中广东省
  province.selectedIndex = 1;
  var event = new Event('change');
  province.dispatchEvent(event);
  // 选中深圳市
  city.selectedIndex = 2;
  city.dispatchEvent(event);
}

// 初始化省份列表
initProvinceList();

其中，updateCityList 函数根据选中的省份，更新城市列表，清空城市 select 的 options 按钮，重新添加城市选项；updateCountyList 函数根据选中的城市，更新区县列表，清空区县 select 的 options 按钮，重新添加区县选项；initProvinceList 函数初始化省份列表，为省份 select 添加 option ，并绑定 onchange 事件；changeProvince 函数手动模拟触发省份变化事件（仅作演示用）。

示例说明

示例一

假设用户先选择了省份 “广东省”，则该页面上的城市列表会随着选择的省份变化而更新，城市列表中将显示该省份下的所有城市（其中默认选项为“Select City”）。当用户选中一个城市后，区县列表将更新为该城市下的所有区县（其中默认选项为“Select County”）：

1. 在页面刚加载完成后：
省份: [Select Province]
城市: [Select City]
区县: [Select County]

2. 选择省份"广东省"后：
省份: 广东省
城市: [Select City] 下拉菜单中显示：广州市、深圳市
区县: [Select County]

3. 选择广州市后：
省份: 广东省
城市: 广州市
区县: [Select County] 下拉菜单中显示：荔湾区、海珠区

示例二

当用户手动模拟触发省份变更事件时，城市、区县列表也会跟随变化，因为触发省份变更事件后会自动触发城市列表的更新：

1. 在页面刚加载完成后同上

2. 手动模拟触发广东省省份变更事件：
页面更新与示例一步骤2中一致

3. 手动触发深圳市城市变更事件：
页面更新与示例一步骤3中一致