表单字段联动必须手动控制「值变化→触发逻辑→更新DOM」链路，原生JS最可控；监听用addEventListener('change')，DOM加载后绑定，select清空用options.length=0，数据用对象映射提升查找效率。
表单字段联动不是靠 CSS 类或属性绑定自动生效的，必须手动控制「值变化 → 触发逻辑 → 更新 DOM」这条链路。原生 JS 最可控，也最容易暴露数据加载时机、初始值恢复等关键问题。
怎么监听 select 或 radio 的值变化才不漏事件
用 addEventListener('change', handler)，别写 onchange = handler 或在 HTML 里写 onchange=""。前者支持多次绑定和解绑，后者会覆盖；内联写法还无法响应键盘操作（如方向键+回车选中）。
- 确保 DOM 加载完再绑定：放在
document.addEventListener('DOMContentLoaded', ...)里，或把脚本放在</body>前 - 如果是 radio/checkbox 组，监听父容器的
change事件，再用e.target判断具体哪个被选中，别遍历所有同名元素 - 需要实时响应输入（比如搜索框联动），改用
input事件，change只在失焦或回车后触发，延迟明显
第二个 select 怎么动态清空并重填选项
不清空旧选项就直接插入，会导致下拉列表越点越多——这是最常踩的坑。别用 innerHTML = '' 清空，它会重置已选值、丢失绑定事件。
- 安全清空方式：
selectEl.options.length = 0或while (selectEl.options.length) selectEl.remove(0) - 创建 option 时用
document.createElement('option')，设置option.value和option.textContent分开处理，避免 XSS 和转义异常 - 如果选项来自后端，务必加
disabled状态和 loading 提示，否则用户连续点击会触发多个并发请求
数据结构怎么组织才方便前端做依赖映射
别用扁平数组遍历查找子项，性能差还易出错。直接用对象键值对映射，一级 key 是父级 value，value 是它的子项数组。
立即学习“前端免费学习笔记（深入）”；
- 示例：
const optionsMap = { 'web': [{value:'react', label:'React'}, {value:'vue', label:'Vue'}] }; - 查子项只需一行：
optionsMap[categorySelect.value] ?? []，避免undefined.map报错 - key 类型要一致：全用字符串，别混数字，
optionsMap[1]和optionsMap['1']不等价 - 后端返回树形数据，前端也建议立刻转成这种 map 结构，只转一次，存在闭包或模块变量里复用
为什么页面刷新后联动状态就丢了
这不是联动逻辑错了，是没处理表单默认行为。表单提交默认整页刷新，JS 状态全归零。
- 检查是否写了
event.preventDefault()，否则submit事件一触发就刷新 - 如果必须提交，把当前选中的值存进
localStorage或 URL 参数，页面重载后读取恢复 - 服务端渲染页面（如 PHP/Java 模板）时，注意后端生成的
selected属性可能和前端 JS 冲突，优先以 JS 状态为准
联动真正难的不是写几行事件监听，而是数据加载时机、空状态兜底、初始值同步这三处——它们不出现在教程代码块里，但线上出问题八成卡在这儿。
