表单联动回显必须用 addEventListener 绑定 change 事件，确保 DOM 加载完成；联动显示/隐藏用 hidden 属性；动态生成 select 选项清空用 options.length = 0；实时计算防重复绑定与异步竞态。
change 事件监听必须用 addEventListener
表单联动回显最常卡在「值变了，但后续逻辑没触发」——根本原因是用了 onchange 赋值或内联写法。比如 select.onchange = handler 会覆盖前一个绑定；<select onchange="doSomething()"> 则完全不响应键盘操作（方向键选中+回车），用户按空格或回车切换选项时，联动直接失效。
正确做法只有一条：select.addEventListener('change', handler)。它支持多次绑定、可解绑、兼容鼠标和键盘交互。务必确保 DOM 加载完成再执行绑定，否则 querySelector 找不到元素：
- 把脚本放在
</body>前，或 - 包在
document.addEventListener('DOMContentLoaded', () => { ... })里
联动字段的显示/隐藏别靠 CSS 类切换
用 element.classList.toggle('hidden') 或 style.display = 'none' 看似简单，但容易引发状态错乱：比如用户切走又切回页面，或表单重置后字段没恢复可见性，或移动端软键盘弹起导致布局抖动。
更稳的方式是直接操作 hidden 属性：targetField.hidden = true。它语义明确、浏览器原生支持、不影响样式继承，且与表单提交逻辑天然隔离（hidden 字段默认不参与提交）。
立即学习“前端免费学习笔记（深入）”；
注意两个坑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别在 change 回调里直接写
targetField.hidden = false，要先判断当前值是否真需要显示——比如选了「无」就该隐藏，选了「自定义」才显示输入框； - 初始加载时，得手动根据表单默认值执行一次显示/隐藏逻辑，否则编辑页回显时字段状态和实际值对不上
动态生成 select 选项必须清空 options.length
二级联动（如省→市）里，每次一级选项变化都要重填二级 <select>。很多人用 innerHTML = '' 清空，这会导致已选值被重置、绑定的事件丢失、甚至触发不必要的渲染。
正确做法是直接操作 options 集合：citySelect.options.length = 0。它干净、高效、不触发重排。之后插入新选项时，优先用 document.createDocumentFragment() 批量添加，避免逐个 appendChild 拖慢性能。
如果选项来自后端，记得加 loading 态和错误兜底：
- 请求开始时设
citySelect.disabled = true，并给 placeholder 选项加文字提示（如「加载中…」）； - fetch 失败时，保留 disabled，并在旁边插入
<small class="text-danger">加载失败，请重试</small>
回显计算结果要防重复绑定和异步竞态
实时显示计算结果（比如单价×数量=金额）不是简单监听 input，关键在避免「用户狂点、回调乱序、结果错乱」。常见错误是每次输入都重新绑定事件，导致同一字段触发多个 handler，结果叠加出错。
解决方法分三步：
- 用
input事件（非change）监听实时输入，它比keyup更可靠（兼容粘贴、剪切、语音输入）； - 给每个计算字段加唯一标识（如
data-calc="amount"），handler 内统一取值、统一计算、统一赋值到目标output或span元素； - 如果涉及异步（比如查税率接口），必须用
AbortController中断上一次未完成请求，否则旧响应覆盖新结果
最易忽略的一点：初始回显时，别只塞值，要同步触发一次计算逻辑——否则编辑页打开时金额还是 0，直到用户手动敲个数字才更新。
