使用json方式实现省市级联效果

以下是一个使用json方式实现省市级联效果的示例代码：

HTML：

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

JavaScript：

// 省市数据
var data = {
  "广东省": {
    "广州市": ["越秀区", "荔湾区", "海珠区", "天河区"],
    "深圳市": ["福田区", "罗湖区", "南山区", "宝安区"],
    "珠海市": ["香洲区", "斗门区", "金湾区"],
    "汕头市": ["金平区", "龙湖区", "潮南区", "潮阳区"]
  },
  "江苏省": {
    "南京市": ["玄武区", "鼓楼区", "建邺区", "浦口区"],
    "苏州市": ["姑苏区", "沧浪区", "相城区", "吴中区"],
    "无锡市": ["滨湖区", "惠山区", "锡山区", "江阴市"]
  }
};

// 初始化省份
for (var province in data) {
  var option = document.createElement("option");
  option.value = province;
  option.text = province;
  document.getElementById("province").appendChild(option);
}

// 省份变化时更新城市选项
document.getElementById("province").addEventListener("change", function() {
  var province = this.value;
  var citySelect = document.getElementById("city");
  citySelect.innerHTML = "";
  for (var city in data[province]) {
    var option = document.createElement("option");
    option.value = city;
    option.text = city;
    citySelect.appendChild(option);
  }
});

在上述代码中，我们使用了一个名为`data`的对象来存储省市数据。该对象的键是省份名称，值是一个包含该省份城市信息的对象。城市信息对象的键是城市名称，值是一个包含该城市区县信息的数组。

在页面加载时，我们通过遍历`data`对象的键来初始化省份选择框。当用户选择省份时，我们根据选择的省份更新城市选择框的选项。具体来说，我们根据选择的省份从`data`对象中获取该省份的城市信息对象，然后遍历该对象的键来构建城市选项。每个城市选项的值和文本内容都设置为城市名称。当用户选择城市时，我们可以根据所选省份和城市来获取该城市的区县信息，以实现更高级别的级联效果。