如何通过下拉选择动态显示或隐藏表单字段

本文介绍如何使用原生 javascript 监听 `` 下拉框的 `change` 事件，根据用户选择动态显示/隐藏对应的时间选择区块（如“午间时间”或“晚间时间”），

无需 jquery，语义清晰、兼容性强。

在表单交互中，常需根据用户对下拉菜单（）的选择，动态控制后续字段的可见性——例如仅当选择“Midi”时显示午间时间选项，选择“Soir”时切换至晚间时间。这比单选按钮（radio）稍复杂，因需精准匹配选项值与目标区块 ID，但实现起来同样简洁高效。

✅ 推荐实现方式：基于 data-id 属性 + classList.toggle()

核心思路是：

• 为每个 添加 data-id 属性，其值为对应区块的 CSS 选择器（如 #midi）；
• 在 change 事件处理器中，先隐藏所有相关区块，再根据当前选中项的 data-id 显示目标区块；
• 使用纯 CSS 控制显隐（推荐 display: none/block，避免影响布局流）。

以下是完整、可直接运行的代码示例：

  
    -- Sélectionnez un service --
    Midi
    Soir
  




  
Heure midi
  
    
      
      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
    
  

? 关键注意事项

• 避免 onchange="handleChange(this)" 内联写法：现代最佳实践推荐使用 addEventListener，更易维护、支持事件解绑、避免全局污染；
• data-id 值必须为合法 CSS 选择器（如 #midi），确保 document.querySelector() 能准确获取元素；
• 初始化状态很重要：页面加载后应明确设置默认可见区块，否则可能出现“全黑”状态；
• 无障碍友好：隐藏区块仍保留在 DOM 中（非 remove()），屏幕阅读器可通过 aria-hidden 进一步优化（进阶可选）；
• Bootstrap 兼容性：本例使用 Bootstrap 5 的 d-none / d-block 工具类，若用其他框架，请替换为对应隐藏类（如 Tailwind 的 hidden / block）。

通过以上结构化实现，你不仅能精准控制表单字段的条件显示，还能保持代码可读性、可扩展性——未来新增选项（如 "matin"）只需添加 Matin 和对应区块即可，逻辑零修改。