javascript省市区三级联动

### 使用 JavaScript 实现省市区三级联动

#### 创建 HTML 结构
HTML 部分定义了三个 `<select>` 下拉框，分别对应省份、城市和区县。

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

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

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

#### 准备数据源
通常情况下，会有一个 JSON 数据文件来存储所有的省市地区信息。这里假设已经存在一个名为 `regions.json` 的文件[^1]：

{
  "provinces": [
    {"id": "1", "name": "北京市"},
    {"id": "2", "name": "上海市"}
  ],
  "cities": {
    "1": [{"id": "101", "name": "东城区"}, {"id": "102", "name": "西城区"}],
    "2": [{"id": "201", "name": "黄浦区"}, {"id": "202", "name": "徐汇区"}]
  },
  "districts": {
    "101": ["A街道", "B街道"],
    "102": ["C街道", "D街道"]
  }
}

#### 编写 JavaScript 逻辑
通过 AJAX 请求获取上述 JSON 文件中的数据，并动态填充各个下拉框的内容。当用户选择了某个选项时，触发相应的事件处理器更新后续的下拉框内容。

document.addEventListener('DOMContentLoaded', function () {

  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');
  const districtSelect = document.getElementById('district');

  let regionsData;

  fetch('./regions.json')
      .then(response => response.json())
      .then(data => {
          regionsData = data;
          
          // 初始化加载省份列表
          populateOptions(provinceSelect, 'provinces', null);
      });

  function populateOptions(selectElement, type, parentId) {
      selectElement.innerHTML = '<option value="">请选择...</option>';
      
      if (type === 'provinces') {
          Object.values(regionsData[type]).forEach(item => {
              const option = new Option(item.name, item.id);
              selectElement.add(option);
          });
      } else if (parentId !== undefined && regionsData[type][parentId]) {
          Object.values(regionsData[type][parentId]).forEach(item => {
              const option = new Option(item.name, item.id);
              selectElement.add(option);
          });
      }

      updateNextLevel(type.split('s')[0]);
  }

  function updateNextLevel(currentType) {
      switch (currentType) {
          case 'province':
              citySelect.value = '';
              districtSelect.value = '';
              
              if (provinceSelect.value) {
                  populateOptions(citySelect, 'cities', provinceSelect.value);
              } else {
                  clearOptions(citySelect);
                  clearOptions(districtSelect);
              }
              break;
          
          case 'city':
              districtSelect.value = '';

              if (citySelect.value) {
                  populateOptions(districtSelect, 'districts', citySelect.value);
              } else {
                  clearOptions(districtSelect);
              }
              break;
      }
  }

  function clearOptions(element) {
      element.innerHTML = '<option value="">请选择...</option>';
  }

  provinceSelect.addEventListener('change', () => {updateNextLevel('province');});
  citySelect.addEventListener('change', () => {updateNextLevel('city');});

})();

此段脚本实现了基于纯 JavaScript 的省市区三级联选效果，在页面加载完成后自动执行并初始化省份列表；每当用户改变任一上级区域的选择时，都会调用对应的函数刷新其子级区域的数据展示。