原生JavaScript实现省市区三级联动下拉框

HTML基础结构

首先准备三个下拉选框，分别对应省份、城市和区县。以下是一个基础的HTML结构：

<!-- 省级选择 -->
<select id="province"></select>

<!-- 市级选择 -->
<select id="city"></select>

<!-- 区县级选择 -->
<select id="district"></select>

核心JavaScript实现

要实现联动效果，核心在于初始化加载一级数据，并在选择变化时动态清空并填充下一级数据。

第1步：定义行政区划数据

需要将全国各省、市、区的层级关系以嵌套的数组形式存储。在实际项目中，建议从后端接口获取或通过外部 .json 文件异步加载，以保持页面整洁。以下展示了部分示例数据结构（实际使用请替换完整数据）：

var areaData = [
  {
    name: '北京市',
    cities: [
      {
        name: '北京市',
        districts: ['东城区', '西城区', '朝阳区', '海淀区']
      }
    ]
  },
  {
    name: '广东省',
    cities: [
      {
        name: '广州市',
        districts: ['天河区', '越秀区', '海珠区']
      },
      {
        name: '深圳市',
        districts: ['福田区', '南山区', '宝安区']
      }
    ]
  }
];

第2步：编写初始化与联动函数

创建 `initSelect` 和 `updateDistricts` 函数来处理具体的 DOM 操作。以下是通用代码逻辑：

// 获取DOM元素
var provinceEl = document.getElementById("province");
var cityEl = document.getElementById("city");
var districtEl = document.getElementById("district");

// 1. 初始化省份列表
function loadProvince() {
  for (var i = 0; i < areaData.length; i++) {
    var option = new Option(areaData[i].name, areaData[i].name);
    provinceEl.add(option);
  }
}

// 2. 根据选中的省份加载城市列表
provinceEl.onchange = function() {
  cityEl.options.length = 0; // 清空城市
  districtEl.options.length = 0; // 清空区县
  
  if (!this.value) return;
  
  var provIndex = getIndex(this.value, areaData);
  var currentCities = areaData[provIndex].cities;
  
  for (var i = 0; i < currentCities.length; i++) {
    var option = new Option(currentCities[i].name, currentCities[i].name);
    cityEl.add(option);
  }
};

// 3. 根据选中的城市加载区县列表
cityEl.onchange = function() {
  districtEl.options.length = 0; // 清空区县
  
  if (!this.value) return;
  
  var provIndex = getIndex(provinceEl.value, areaData);
  var cities = areaData[provIndex].cities;
  var cityIndex = getIndex(this.value, cities);
  var currentDistricts = cities[cityIndex].districts;
  
  for (var i = 0; i < currentDistricts.length; i++) {
    var option = new Option(currentDistricts[i], currentDistricts[i]);
    districtEl.add(option);
  }
};

// 辅助函数：通过名称在对象数组中查找索引
function getIndex(name, array) {
  for (var i = 0; i < array.length; i++) {
    if (array[i].name === name) return i;
  }
  return -1;
}

// 启动执行
loadProvince();

注意事项与总结

上述代码提供了一个轻量级的解决方案。如果你需要处理完整的中国行政区划（包括港澳台数据），请注意以下几点：
1. 由于原始数据量较大，建议压缩传输或将数据存储在CDN上。
2. 如果项目本身已经使用了 JQuery，可以通过 $().change() 简化事件绑定过程。
3. 确保所有级联的 onchange 事件中都要先清空下一级的 options，否则会出现历史数据残留问题。

以上就是JavaScript实现省市区三级联动下拉框的详细内容，更多关于前端地址选择器优化的资料请关注本站其它相关文章！