使用javascript敲写出三省联动的代码

以下是使用 JavaScript 实现三省联动的示例代码：

HTML 代码：

<select id="province">
  <option value="">请选择省份</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript 代码：

// 省份数据
var provinces = [
  { name: '北京市', cities: ['北京市'] },
  { name: '上海市', cities: ['上海市'] },
  { name: '广东省', cities: ['广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'] },
  { name: '山东省', cities: ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'] }
];

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

// 获取城市数据
function getCities(province) {
  for (var i = 0; i < provinces.length; i++) {
    if (provinces[i].name === province) {
      return provinces[i].cities;
    }
  }
  return [];
}

// 初始化城市下拉框
var citySelect = document.getElementById('city');
provinceSelect.addEventListener('change', function() {
  var selectedProvince = this.value;
  var cities = getCities(selectedProvince);
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  for (var i = 0; i < cities.length; i++) {
    var option = document.createElement('option');
    option.value = cities[i];
    option.innerHTML = cities[i];
    citySelect.appendChild(option);
  }
});

// 获取区县数据
function getDistricts(province, city) {
  for (var i = 0; i < provinces.length; i++) {
    if (provinces[i].name === province) {
      for (var j = 0; j < provinces[i].cities.length; j++) {
        if (provinces[i].cities[j] === city) {
          // 这里返回一个空数组，因为示例数据中没有对应的区县数据
          return [];
        }
      }
    }
  }
  return [];
}

// 初始化区县下拉框
var districtSelect = document.getElementById('district');
citySelect.addEventListener('change', function() {
  var selectedProvince = provinceSelect.value;
  var selectedCity = this.value;
  var districts = getDistricts(selectedProvince, selectedCity);
  districtSelect.innerHTML = '<option value="">请选择区县</option>';
  for (var i = 0; i < districts.length; i++) {
    var option = document.createElement('option');
    option.value = districts[i];
    option.innerHTML = districts[i];
    districtSelect.appendChild(option);
  }
});

在页面加载完成后，以上 JavaScript 代码会自动初始化省份下拉框，并且根据用户选择的省份动态生成城市下拉框和区县下拉框。需要注意的是，以上示例数据中没有对应的区县数据，因此在 `getDistricts` 函数中直接返回了一个空数组。如果实际应用中有对应的区县数据，可以在该函数中返回相应的数据。