三级联动城市选择器：JavaScript 实现省市区联动

以下是一个简单的城市选择三级联动实现。

HTML 代码：

<select id='province'>
  <option value=''>请选择省份</option>
  <option value='北京市'>北京市</option>
  <option value='上海市'>上海市</option>
  <option value='广东省'>广东省</option>
  <!-- 其他省份选项 -->
</select>
<select id='city'>
  <option value=''>请选择城市</option>
</select>
<select id='district'>
  <option value=''>请选择区县</option>
</select>

JavaScript 代码：

//省份数据
var provinceData = [
  {
    name: '北京市',
    city: [
      {
        name: '北京市',
        district: [
          '东城区',
          '西城区',
          '朝阳区',
          '丰台区',
          '石景山区',
          '海淀区',
          '门头沟区',
          '房山区',
          '通州区',
          '顺义区',
          '昌平区',
          '大兴区',
          '怀柔区',
          '平谷区',
          '密云区',
          '延庆区'
        ]
      }
    ]
  },
  {
    name: '上海市',
    city: [
      {
        name: '上海市',
        district: [
          '黄浦区',
          '徐汇区',
          '长宁区',
          '静安区',
          '普陀区',
          '虹口区',
          '杨浦区',
          '闵行区',
          '宝山区',
          '嘉定区',
          '浦东新区',
          '金山区',
          '松江区',
          '青浦区',
          '奉贤区',
          '崇明区'
        ]
      }
    ]
  },
  {
    name: '广东省',
    city: [
      {
        name: '广州市',
        district: [
          '荔湾区',
          '越秀区',
          '海珠区',
          '天河区',
          '白云区',
          '黄埔区',
          '番禺区',
          '花都区',
          '南沙区',
          '增城区',
          '从化区'
        ]
      },
      {
        name: '深圳市',
        district: [
          '罗湖区',
          '福田区',
          '南山区',
          '宝安区',
          '龙岗区',
          '盐田区'
        ]
      },
      {
        name: '珠海市',
        district: [
          '香洲区',
          '斗门区',
          '金湾区'
        ]
      },
      // 其他城市及区县
    ]
  },
  // 其他省份数据
];

//省份下拉框
var provinceSelect = document.getElementById('province');
//城市下拉框
var citySelect = document.getElementById('city');
//区县下拉框
var districtSelect = document.getElementById('district');

//初始化省份下拉框
for (var i = 0; i < provinceData.length; i++) {
  var option = document.createElement('option');
  option.value = provinceData[i].name;
  option.innerText = provinceData[i].name;
  provinceSelect.appendChild(option);
}

//省份下拉框改变事件
provinceSelect.onchange = function () {
  //清空城市、区县下拉框
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  districtSelect.innerHTML = '<option value="">请选择区县</option>';
  //获取选中的省份名称
  var provinceName = this.value;
  //查找省份数据
  for (var i = 0; i < provinceData.length; i++) {
    if (provinceData[i].name === provinceName) {
      //初始化城市下拉框
      for (var j = 0; j < provinceData[i].city.length; j++) {
        var option = document.createElement('option');
        option.value = provinceData[i].city[j].name;
        option.innerText = provinceData[i].city[j].name;
        citySelect.appendChild(option);
      }
      break;
    }
  }
};

//城市下拉框改变事件
citySelect.onchange = function () {
  //清空区县下拉框
  districtSelect.innerHTML = '<option value="">请选择区县</option>';
  //获取选中的城市名称
  var cityName = this.value;
  //查找省份数据
  for (var i = 0; i < provinceData.length; i++) {
    for (var j = 0; j < provinceData[i].city.length; j++) {
      if (provinceData[i].city[j].name === cityName) {
        //初始化区县下拉框
        for (var k = 0; k < provinceData[i].city[j].district.length; k++) {
          var option = document.createElement('option');
          option.value = provinceData[i].city[j].district[k];
          option.innerText = provinceData[i].city[j].district[k];
          districtSelect.appendChild(option);
        }
        break;
      }
    }
  }
};

实现效果：

当选择省份时，城市下拉框将显示对应省份的城市选项，区县下拉框将清空。当选择城市时，区县下拉框将显示对应城市的区县选项。