纯HTML无法实现三级联动，必须用JavaScript监听select的change事件并动态更新下级选项；需通过DOM操作清空、重建、设值，合理组织嵌套对象数据结构，并注意iOS兼容性与无障碍支持。
纯 HTML 无法实现三级联动，必须用 JavaScript 控制 select 的 change 事件并动态更新下级选项——这是卡住 90% 新手的第一关。
为什么直接写三个 select 标签没用
只放静态 option，比如把所有中国城市都塞进第二个 select，用户一打开页面就看到几百个选项，根本不是“选完省才出市”。浏览器不会自动隐藏、过滤或重载内容。联动的本质是 DOM 操作：清空、重建、设值。
常见错误现象：
- 用户选了“广东省”，但“南京市”还显示在城市下拉里
- 切换省份后，城市下拉框空白，控制台无报错（其实是 JS 没执行或数据 key 对不上）
- 第三次选择区县时，前两级的选中值被重置（没保存上一次选中的 value）
实操建议：
- 每次触发 change 前，先用 citySelect.value 缓存当前选中值
- 清空下级 select 时，用 innerHTML = '' 或 while (el.firstChild) el.removeChild(el.firstChild)，别漏掉默认提示项（如 <option value="">-- 请选择 --</option>）
- 数据结构用对象嵌套，键名严格对应 value 属性值，例如：{ "guangdong": { "guangzhou": ["Yuexiu", "Tianhe"] } }，避免用中文作 key
cityData 数据怎么组织才不翻车
把全部省市县数据硬编码进 HTML 或 JS 文件，首次加载慢、体积大、难维护。但全靠接口请求又增加失败风险（尤其移动端弱网）。折中方案是预置轻量 JSON 在 JS 里，按需取用。
推荐结构：
- 一级（省）用数组或对象键名，如 ["guangdong", "jiangsu"]
- 二级（市）用对象，键为省 code，值为市数组：{ "guangdong": ["guangzhou", "shenzhen"] }
- 三级（区）同理，嵌在市之下：{ "guangdong": { "guangzhou": ["Yuexiu", "Tianhe"] } }
容易踩的坑：
- 键名大小写不一致（"Guangdong" 和 "guangdong" 当成两个省）
- 省市区名称含空格或括号（如 "Inner Mongolia"），导致 JS 变量名非法，必须用方括号访问：data["Inner Mongolia"]
- 把数据存在 dataset 或自定义属性里，结果 HTML 解析时自动转小写，再读出来对不上
移动端 iOS 上 select 联动为啥点不动
iOS 的 select 是原生控件，不响应 :hover，禁用 pointer-events 无效，且 change 事件触发时机和安卓不同——常表现为：点开省列表，选完没反应，要再点一次才更新城市。
立即学习“前端免费学习笔记（深入）”；
解决方向：
- 不依赖 change 的“松手即触发”，改监听 input 事件（iOS 支持更好）
- 给每个 select 加 tabindex="0"，确保键盘可聚焦，提升可访问性
- 避免用 display: none 隐藏下级 select，改用 visibility: hidden 或 opacity: 0，否则 iOS 可能跳过渲染
- 测试时真机连 Safari 开发者工具，别只信 Chrome 模拟器
怎么让屏幕阅读器知道“现在选的是深圳南山区”
动态替换 option 后，aria 属性不会自动更新。用户用 VoiceOver 或 TalkBack 操作时，听到的仍是旧文本，甚至报“无选项”。
关键动作：
- 每次填充新 option 后，手动设置 citySelect.setAttribute('aria-label', '请选择深圳市下辖区')
- 页面加一个隐藏的实时播报区：<div aria-live="polite" aria-atomic="true"></div>，JS 更新时往里写文本：liveEl.textContent = '已切换至广东省'
- label[for="province"] 必须存在，且 for 值与 id 严格一致；JS 动态插入 select 时，别忘了同步写 label
最易忽略的一点：三级联动完成后的最终选中状态，必须有明确的 aria-describedby 指向说明文字，比如“当前地址：广东省 深圳市 南山区”，否则无障碍检测直接 fail。
