用JavaScript监听select的change事件，通过textContent更新标题并控制对应说明块显隐；提交时需双重校验可见说明块与选中值是否一致，防止静默错误。
HTML动态表单标题怎么用JavaScript实时更新
标题不是静态文本，得跟着用户选择实时变——靠纯HTML做不到，必须用JavaScript监听并修改textContent或innerText。别试图用innerHTML拼接，容易XSS；也别用document.title，那是网页标题，不是表单里的标题。
常见错误是把标题写死在<h2></h2>里，或者用value属性去设（<h2></h2>没有value），结果改了没反应。
- 把标题容器加上
id，比如id="form-title" - 用
document.getElementById('form-title').textContent = '新标题'更新 - 绑定在
select的change事件上，不是click或input - 如果标题含简单HTML（如强调词），可用
innerHTML，但必须确保内容可信，不拼接用户输入
select onchange触发不同说明文字显示/隐藏
核心是“显隐控制”，不是反复创建DOM。用display: none配合classList.toggle()最稳，比remove()/append()快，也避免事件丢失。
典型翻车点：多个<div class="desc">都写<code>display: block初始状态，结果一打开全堆一起；或者用visibility: hidden，占位还在，布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 所有说明块统一加
class="desc"，初始CSS设为.desc { display: none; } - 每个
desc块加data-target属性，值对应select的option的value -
onchange里先用document.querySelectorAll('.desc').forEach(el => el.style.display = 'none')清空 - 再用
document.querySelector(`.desc[data-target="${e.target.value}"]`)找对应块，设style.display = 'block'
为什么不能只靠CSS :has() 或 data-* 属性自动切换
:has()目前（Chrome 120+ / Safari 15.4+）虽支持，但Firefox仍不兼容，且无法驱动文本内容变化——它只能控制样式，不能改标题文字、不能触发表单逻辑、也不能做校验提示。
更现实的问题是：data-属性本身是静态的，没监听能力。你改select.value，data-不会自己动，也不会让其他元素响应。
-
:has()适合做「选中后高亮对应label」这类纯视觉反馈，不适合业务逻辑分支 - 想用
data-驱动行为，必须配JavaScript读取+判断，绕不开 - 部分人试过
input[type="radio"] + .desc这种相邻兄弟选择器，但select和div通常不相邻，结构一变就失效
表单提交前如何验证当前显示的说明块是否匹配选中项
用户可能手动改DOM、禁用JS、或用DevTools绕过显隐逻辑——这时候光看select.value不够，得双重校验：既要选项合法，也要当前可见的说明块确实属于它。
否则后端收到type=premium，但前端实际展示的是basic的说明，用户填错字段都不知道。
- 提交时用
document.querySelector('.desc[style*="block"]')拿到当前可见块 - 读它的
dataset.target，和select.value对比是否一致 - 不一致就
preventDefault()，并alert()或加红边提示 - 别依赖
offsetParent !== null判断可见性——它受父级transform、opacity等影响，不准
事情说清了就结束。动态表单真正的复杂点不在切换逻辑，而在状态同步：JS改了UI，UI变了又得反向约束数据流，稍不注意就出现“看着是A选项，提交却是B的值”这种静默错误。
