如何使用 JavaScript 根据下拉框选择动态显示或隐藏表单字段

通过监听 `` 元素的 `change` 事件，结合 `data-id` 属性与 css 类控制，可实现根据用户选择动态切换对应表单区块的显隐状态。

在构建动态表单时，常需根据用户对下拉菜单（）的选择，仅显示与之关联的后续字段（如“午间时段”或“晚间时段”），提升界面简洁性与用户体验。本教程将手把手教你用原生 javaScript 实现这一功能，无需依赖 jquery 或框架。

✅ 实现原理

核心思路是：

• 为每个 添加 data-id 属性，其值为对应区块的 css ID（如 #midi、#soir）；
• 在 上绑定 change 事件，获取选中项的 data-id；
• 隐藏所有目标区块，再仅显示匹配该 data-id 的区块。

? 完整示例代码

html 结构（关键部分）：

        — 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（使用 bootstrap 5 的 d-none 类，或自定义）：

/* 可选：兼容旧版或自定义隐藏类 */ .form-block.d-none { display: none !important; }

javascript（推荐现代写法，避免内联事件）：

document.addEventListener('DOMContentLoaded', () => {   const select = document.getElementById('autoSizingSelect');   const blocks = document.querySelectorAll('.form-block');    select.addEventListener('change', function() {     const targetId = this.selectedOptions[0]?.dataset.id;      // 隐藏全部区块     blocks.forEach(block => block.classlist.add('d-none'));      // 显示匹配的区块（若存在）     if (targetId && document.queryselector(targetId)) {       document.querySelector(targetId).classList.remove('d-none');     }   });    // 初始化：默认显示第一个选项对应的区块（可选）   if (select.value === 'midi') {     document.getElementById('midi').classList.remove('d-none');   } });

⚠ 注意事项

• 确保每个 data-id 值与目标区块的 id 完全一致（含 # 符号）；
• 使用 document.querySelectorAll(‘.form-block’) 统一管理区块，便于扩展更多选项；
• 添加 domContentLoaded 保证 DOM 加载完成后再绑定事件；
• 若使用 Bootstrap 5+，优先使用内置工具类 d-none / d-block，语义清晰且响应式友好；
• 建议为 添加默认空选项（value=””），避免页面加载时误触发显示逻辑。

通过以上方式，你就能轻松实现下拉选择驱动的表单字段动态切换——简洁、健壮、易于维护。