JavaScript 应用 change 事件委托统一监听表单控件，配合 classList.toggle 切换 .js-hidden 类控制显隐，联动下拉框需动态更新 option，提交前仅校验可见 required 字段，并在 reset 后重执行判断。
用 JavaScript 监听 change 事件控制显隐
纯 HTML 或 CSS 无法响应用户选择后动态显示/隐藏字段，change 是最稳妥的监听时机。下拉框、单选、复选框只有在值真正提交后才触发 change，不会像 input 那样被中间操作干扰。
常见错误是绑定 click —— 用户点开 select 又取消，就误触发；或只监听单个控件，漏掉组合条件（比如 A 选“其他”且 B 有输入才显示 C）。
- 统一用事件委托：给
form绑定change，再在回调里判断event.target的name或dataset.trigger - 首次加载必须手动调用一次判断函数，否则默认选中项已满足条件，但对应字段仍被隐藏
- 避免对每个控件单独写
addEventListener，容易遗漏、难维护
用 classList.toggle 控制 display 而非 style.display
直接改 style.display = 'none' 看似简单，但会覆盖内联样式、干扰 CSS 媒体查询，且重置时容易漏设回 'block' 或 'inline-block'。
更可靠的做法是定义一个 CSS 类（如 .js-hidden { display: none; }），再用 element.classList.toggle("js-hidden", shouldHide) 切换。
立即学习“前端免费学习笔记（深入）”；
- 初始所有条件字段加
class="js-hidden"，CSS 控制默认隐藏 - 隐藏时同步设
element.disabled = true和element.required = false，否则键盘用户仍可聚焦、提交时带空值 - 别用
visibility: hidden—— 元素还占位，布局错乱；也别用remove()—— reset 表单时字段就没了
联动下拉框要清空并重写 option，不能只改 value
用户切换国家后，省份下拉框不会自动刷新选项。靠设置 select.value 或 select.selectedIndex 完全无效，必须手动更新 option 子节点。
硬编码所有组合（如 “中国→北京/上海”，“美国→CA/TX”）很快失控。推荐用映射对象驱动：
const regionMap = {
"CN": ["北京", "上海", "广州"],
"US": ["California", "Texas", "New York"]
};
- 清空目标
select用innerHTML = ""或循环removeChild()，避免残留selected状态 - 注入新
option时，记得设option.value和option.textContent，不要只写 innerHTML - 如果后端返回结构化数据，优先用 API 动态拉取，而不是把全部映射塞进前端 JS
提交前校验只检查可见的 required 字段
浏览器原生 checkValidity() 会校验所有 required 字段，包括已被 JS 隐藏的——这会导致误报。必须手动遍历，只对当前显示且 required 的字段调用 reportValidity()。
后端绝不能省略重复校验。JS 控制的显隐只是体验优化，攻击者可绕过 JS 直接提交任意字段。
- 校验逻辑应基于元素真实可见状态：
getComputedStyle(element).display !== 'none'，而非是否含某个 class - 隐藏字段也要保留
name，否则提交时整个字段丢失；但需确保disabled为true，防止传空值 - 表单
reset()后，JS 必须重新执行一次条件判断，否则字段状态与 UI 不一致
