用原生 javascript 实现 select 联动需监听第一个 select 的 change 事件，清空并重填第二个 select 的 option；推荐使用 replacechildren() 或兼容性写法清空，动态创建 option 时务必设置 value 属性；后端返回扁平 json 结构（如[{province,cities}]）便于遍历；fetch 需处理异步时机、防抖、错误边界及加载状态；ie11 需降级为 xmlhttprequest、标志位模拟 abortcontroller、循环移除子节点替代 replacechildren()。
怎么用原生 JavaScript 绑定两个 select 的联动关系
核心是监听第一个 select 的 change 事件，清空并重填第二个 select 的 option。别直接操作 innerHTML，容易清掉已选值或触发多余渲染。
常见错误现象：change 事件没绑定成功、第二个 select 选项重复叠加、选中状态丢失（比如用户刚选了“北京”，切到“广东”后，“深圳”没被自动选中）。
- 用
addEventListener('change', handler)，别用onchange = handler，避免覆盖 - 每次更新前先清空
secondSelect.innerHTML = ''，或更稳妥地用secondSelect.replaceChildren()（现代浏览器支持） - 动态生成
option时，记得设value属性，否则提交表单拿不到值 - 如果要保留上次选择，需在重填后手动设置
secondSelect.value = savedValue
JSON 数据结构怎么设计才方便前端做级联
后端返回的结构直接影响前端遍历逻辑。扁平结构（如数组套对象）比嵌套树形结构更容易映射到两级 select。
使用场景：城市-区县、分类-子类、国家-省份。不要让前端去递归解析深度不确定的树。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
[{"province": "广东", "cities": ["广州", "深圳", "珠海"]}, {"province": "江苏", "cities": ["南京", "苏州"]}] - 避免结构：
{"广东": {"广州": ["天河", "越秀"], "深圳": ["南山", "福田"]}}—— 键名不可遍历，且类型不一致 - 字段名统一用小写+下划线或驼峰，别混用；
value字段必须存在，且类型为字符串（数字会转成字符串提交） - 如果数据量大（>200 条），考虑前端预加载全量 JSON，而不是每次 change 都发请求
为什么用 fetch 加载二级选项时经常卡住或报错
不是接口问题，多数是没处理好异步时机和错误边界。fetch 返回 Promise，但很多人忘了 await 或漏了 .catch()。
性能影响：每次切换都发请求，用户快速点选会导致请求打架，旧响应覆盖新响应，显示错乱。
- 加个简单防抖：用
let currentRequest = null，每次发起前currentRequest?.abort()（配合AbortController） - 必须检查
response.ok，不能只靠then()；网络失败、404、500 都得进catch或if (!ok) - 加载中状态要显式处理：禁用二级
select，或显示<option disabled>加载中...</option> - 别在
fetch成功回调里直接操作 DOM，确保secondSelect还在页面上（组件卸载后回调执行会报错）
IE11 兼容时 replaceChildren() 和 AbortController 怎么替代
这两个 API 在 IE11 完全不支持，强行用会直接报错中断脚本。不是“加个 polyfill 就行”，而是得换实现思路。
兼容性影响：用了 replaceChildren() 却没降级，整个级联逻辑失效；用了 AbortController 却没 fallback，快速切换导致内存泄漏或 UI 错乱。
-
replaceChildren()替代：用while (el.firstChild) el.removeChild(el.firstChild) -
AbortController替代：用标志位let isAborted = false，每次请求前设为false，请求回调开头加if (isAborted) return，切换时设为true - IE11 不支持
fetch，必须用XMLHttpRequest，且注意onload和onerror的触发时机差异 -
const/let在 IE11 支持，但箭头函数、解构赋值、模板字符串不支持，写法要保守
