如何使用 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免费学习笔记（深入）”；

							

								
								

									ONLYOFFICE
									
用ONLYOFFICE管理你的网络私人办公室
								
								下载 
							
						
  

    
      
      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=""），避免页面加载时误触发显示逻辑。

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