js中使用JSON方式实现省市级联效果

在JavaScript中，要使用JSON数据实现省市级联的效果，通常涉及到前端处理和后端配合。首先，你需要有一个包含省份、城市数据的JSON数组，例如：

[
  {
    "id": 1,
    "province": "北京",
    "cities": [
      { "id": 101, "city": "北京市区" },
      { "id": 102, "city": "海淀区" }
    ]
  },
  {
    "id": 2,
    "province": "上海",
    "cities": [
      { "id": 201, "city": "上海市区" },
      { "id": 202, "city": "徐汇区" }
    ]
  }
]

然后，在前端，你可以通过JavaScript动态创建下拉列表（select）并填充数据。这里是一个简单的例子：

// 假设jsonData存储了上面的JSON数据
function loadDropdown(jsonData) {
  let select = document.getElementById('provinceSelect');
  jsonData.forEach(item => {
    let option = document.createElement('option');
    option.value = item.id;
    option.text = item.province;
    select.appendChild(option);

    // 如果有子级城市，递归添加
    if (item.cities) {
      loadCities(option, item.cities);
    }
  });
}

function loadCities(parentOption, cityList) {
  cityList.forEach(city => {
    let subOption = document.createElement('option');
    subOption.value = city.id;
    subOption.text = city.city;
    parentOption.addSubmenu(subOption); // 这里假设有一个addSubmenu方法用于添加子菜单
  });
}

当你选择一个省份时，可以监听`change`事件，获取选中的省级选项，并进一步加载其下的城市列表。