如何通过下拉选择动态显示或隐藏表单字段（JavaScript 实现）

本文介绍如何使用原生 javascript 监听 `` 下拉框的 `change` 事件，根据用户选择动态显示/隐藏对应的表单区块（如“午间时间”或“晚间时间”），无需 jquery，兼容现代浏览器。

在表单交互中，常需根据用户的选择动态控制后续字段的可见性——例如：当用户选择“Midi”（午间）时，仅显示午间时间选择器；选择“Soir”（晚间）时，则切换为晚间时间选择器。这种条件式表单展示能显著提升用户体验与表单逻辑清晰度。

实现的关键在于：

• 利用 的 data-id 属性精准关联目标区块（如 data-id=”#midi” 指向 #midi 元素）；
• 通过 change 事件监听下拉框变化；
• 使用 document.querySelectorAll(‘.container’) 统一管理所有待切换区块，并结合 classlist.toggle(‘hidden’) 或更精确的 show/hide 控制逻辑。

以下是完整、健壮且语义清晰的实现方案：

✅ 推荐实现（精准控制 + 无初始闪烁）

        — Sélectionnez un service —     Midi     Soir    
   
   
Heure midi
立即学习“Java免费学习笔记（深入）”；
   
                   12:00       12:15       12:30       12:45       13:00       13:15       13:30       13:45       14:00        
 
   
   
Heure soir
   
                   19:00       19:15       19:30       19:45       20:00       20:15       20:30       20:45       21:00        
 

/* css 控制显隐 */ .form-section {   transition: opacity 0.2s ease, max-height 0.3s ease; } .form-section.hidden {   display: none; } /* 可选：添加淡入效果（需配合 js 移除 hidden 后再加 active） */ .form-section.active {   opacity: 1; }

// javaScript 逻辑（推荐放在