纯JS省市区三级联动组件

纯 JS 写的省市区三级联动，用起来真的挺方便的。没有引入任何第三方库，全靠原生 JavaScript 搞定，从省份选到市、再选到区，整个流程都挺流畅。适合你想保持项目轻量，又功能完整的场景。地址填写、注册表单、配送模块这些地方都能派上用场。

数据结构也蛮清晰的，用的是 JSON 格式，一层省份里面嵌套城市数组，城市里再嵌套区县列表。你只要有这么一份结构清晰的数据源，就能直接用起来。像这样：

[
  {
    "id": "1",
    "province": "北京市",
    "citys": [
      {
        "id": "101",
        "city": "北京市市辖区",
        "districts": [
          {"id": "1001", "district": "东城区"},
          {"id": "1002", "district": "西城区"}
        ]
      }
    ]
  }
]

HTML 结构也没啥复杂的，就三个<select>;标签，分别放省、市、区，ID 分别是province、city、district。页面加载时先把省填进去：

var provinceSelect = document.getElementById('province');
data.forEach(function(p) {
  var option = document.createElement('option');
  option.value = p.id;
  option.text = p.province;
  provinceSelect.appendChild(option);
});

用户选了省份后，change事件一监听，马上就能加载对应城市选项。再选城市，就能拉出区县列表。整个逻辑靠几个事件绑定和innerHTML的更新就能搞定。

哦对了，注意初始时可以把city和district的disabled设成true，避免误选。等用户有选择操作再启用。体验上更顺滑。

如果你懒得自己写 JSON 数据，也可以看看这些资源：

• JavaScript 实现省市区三级联动地址选择
• 省市区 JSON 数据用于三级联动
• JS 获取省市区数据

如果你项目里不打算用 jQuery、Vue 这些框架，这个方案就蛮适合你。结构简单、可控性强，改起来也方便。