纯HTML无法实现可交互地址选择器，因其需JavaScript驱动层级联动、动态数据加载及操作反馈；仅用<select>做三级联动存在数据膨胀、体验差、逻辑错误等问题，推荐fetch+JSON按需加载并妥善处理边界情况。
纯 HTML 无法实现可交互的地址选择器——它需要 JavaScript 驱动层级联动、数据加载和用户操作反馈，HTML 只负责结构容器和语义化标记。
为什么不能只用 <select> 做三级地址选择
常见误区是堆砌三层 <select> 并用 onchange 手动切换下级选项。问题在于：
- 省市区数据量大（全国约 4000+ 行政区划），全量内嵌在 HTML 中导致首屏体积膨胀、加载慢
- 没有搜索、拼音首字母跳转、输入联想等现代体验，移动端操作效率极低
- 无法处理“直辖市”（北京/上海等）或“特别行政区”的特殊层级逻辑（如北京=省=市，无地级市层）
- 用户选完“广东省”，再切到“浙江省”，原“深圳市”选项残留，容易引发脏状态
fetch() + JSON 数据源是当前最简可行方案
把地址数据交给后端 API 或本地 JSON 文件管理，前端按需拉取，避免硬编码。推荐结构如下：
{
"code": 200,
"data": [
{ "code": "110000", "name": "北京市", "level": 1 },
{ "code": "440000", "name": "广东省", "level": 1 },
{ "code": "440300", "name": "深圳市", "level": 2, "parent": "440000" },
{ "code": "440304", "name": "福田区", "level": 3, "parent": "440300" }
]
}
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首次加载只请求省级列表，
fetch('/api/areas?level=1') - 用户选中某省后，再请求其下属地级市：
fetch(`/api/areas?level=2&parent=${provinceCode}`) - 每次切换上级时，清空下级
<select>的innerHTML并重置disabled状态 - 对返回数据做简单去重和排序（尤其地级市常含“市辖区”“省直辖县级行政区”等干扰项）
用 <datalist> 实现轻量单行地址输入联想
如果不需要完整三级联动，只要一个带提示的地址输入框（比如收货地址模糊填），<input list> + <datalist> 是零依赖方案：
<input list="area-list" id="address-input"> <datalist id="area-list"> <option value="北京市"> <option value="上海市"> <option value="广州市天河区"> </datalist>
注意点：
-
<datalist>不支持分组或层级，适合关键词匹配，不适合精确行政归属判断 - 选项值必须是完整字符串，不能动态过滤（浏览器原生行为），所以建议预生成常用组合（省、市、区、热门商圈）
- 移动端部分安卓浏览器对
<datalist>支持不稳定，需降级为普通<input>+ 按钮弹层
真正健壮的地址选择器，核心不在 HTML 标签怎么写，而在于如何设计数据请求节奏、缓存策略和边界 case 处理——比如用户快速连点两个省，第二个请求返回早于第一个，得用 AbortController 或 request ID 对冲；又比如港澳台地区代码不在国标 GB/T 2260 里，得单独兼容。这些细节，比选哪个标签重要得多。
