三个select元素必须用唯一id区分层级，禁用后两级并用嵌套数据源；change事件需清空下级、判空返回、同步更新状态。
三个 <select></select> 元素必须用唯一 id 区分层级
不能靠 class 或 name 区分，否则 JS 无法精准绑定事件或清空下级选项。常见错误是写成 <select name="province"></select> + <select name="city"></select>，结果 document.getElementById('city') 找不到——因为没设 id。
正确结构示例：
<select id="province"><option value="">请选择省份</option></select><br><select id="city" disabled><option value="">请选择城市</option></select><br><select id="district" disabled><option value="">请选择区县</option></select>
-
disabled属性必须加在后两级，避免用户提前操作空数据 - 每个
<option></option>的value建议设为空字符串或统一占位符（如"-1"），方便后续 JS 判断是否“未选择” - 不要给
<select></select>加required—— 否则未选省时，表单校验会直接阻断提交，而联动逻辑本身要求“逐步选择”
change 事件必须绑定到具体 id，且要处理“取消选择”
只监听 province.onchange 是不够的。用户可能从下拉框里手动选回“请选择”，这时 selectedIndex === 0，但 value 是空字符串，不是 undefined —— 很多人漏掉这个判断，导致市下拉框残留旧数据。
关键逻辑点：
- 每次触发
change，先清空下级<select></select>的所有<option></option>（用innerHTML = ''或length = 0） - 再检查当前选中项的
value是否为空，为空就直接return，不加载下级 - 市/区两级都需设
disabled，并在 JS 中显式控制：cityEl.disabled = false/districtEl.disabled = true
数据源必须是嵌套结构，不能扁平数组
如果数据长这样：[{"province":"北京","city":"朝阳","district":"建国门"}]，根本没法做联动——你得知道“北京”下面有哪些城市，而不是一条条记录。
真正能用的结构是：
const provinces = [<br> { name: "北京", cities: [<br> { name: "朝阳", districts: ["建国门", "呼家楼"] },<br> { name: "海淀", districts: ["中关村", "五道口"] }<br> ] },<br> { name: "广东", cities: [...]}<br>];
- 前端硬编码时，用这种对象数组；后端返回时，也应按此结构组织 JSON
- 千万别用 index 做映射（比如
cities[provinceIndex]），一旦数据顺序变动或缺失某省，整个联动就错位 - 如果后端只能返回扁平数据，JS 层必须先用
reduce或Map预处理成嵌套结构，否则维护成本极高
禁用状态切换和 DOM 操作必须同步执行
常见坑：先 cityEl.innerHTML = ''，再 cityEl.disabled = false，但用户可能在这毫秒间点击下拉框，触发空数据渲染。更糟的是，在某些老浏览器里，disabled 状态变更后，change 事件可能不会重绑。
稳妥做法：
- 所有状态变更（清空、填充、启用/禁用）放在同一个函数内完成，不拆成多个异步步骤
- 启用下级前，确保它已清空且有至少一个
<option></option>（哪怕只是“请选择”） - 移动端 Safari 对
disabled的响应有时延迟，可加一句cityEl.blur()强制失焦，避免焦点残留
联动不是“填完上一级就自动跑下一级”，而是每一步都得确认状态干净、权限明确、DOM 可控——少一个环节，用户就会看到空白下拉框或旧数据残留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
