如何通过 JavaScript 动态显示/隐藏下拉菜单关联的表单字段

本文介绍如何基于 `` 下拉框的选择结果，动态控制后续表单区块（如时间选择器）的显示与隐藏，使用原生 javascript 实现无刷新条件渲染，兼容现代浏览器且无需依赖框架。

在表单交互中，常需根据用户对主下拉选项（如“Midi”或“Soir”）的选择，仅展示对应的时间选择区块，提升界面简洁性与用户体验。不同于单选按钮（radio），下拉列表（）需监听 change 事件，并结合 DOM 操作精准控制目标元素的可见性。

✅ 推荐实现方案：基于 data-id 的精准切换

核心思路是：

• 为每个 添加 data-id 属性，指向其关联区块的 ID（如 #midi、#soir）；
• 在 change 事件处理器中，先隐藏所有候选区块，再根据当前选中项的 data-id 显示对应区块；
• 使用 CSS 类（如 .hidden）控制显隐，语义清晰且便于样式扩展。

? HTML 结构（关键修改）

确保两个时间区块均包裹在统一容器中，并添加 id 与初始状态：

  
    — Sélectionnez —
    Midi
    Soir
  




  
Heure midi

							

								
								

									Moonbeam
									
经过专业培训的 AI 写作助手，可帮助您撰写各类长篇内容。
								
								下载 
							
						
立即学习“Java免费学习笔记（深入）”；
  

    
      
      12:00
      12:15
      
    
  



  
Heure soir
  

    
      
      19:00
      19:15
      
    
  

? JavaScript 控制逻辑（推荐现代写法）

document.getElementById('autoSizingSelect').addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  const targetId = selectedOption.dataset.id;

  // 隐藏所有区块
  document.querySelectorAll('.container[id]').forEach(el => {
    el.classList.add('hidden');
  });

  // 显示匹配的区块（若存在）
  if (targetId && document.querySelector(targetId)) {
    document.querySelector(targetId).classList.remove('hidden');
  }
});

// 页面加载时，根据默认选中项初始化显示（可选）
window.addEventListener('DOMContentLoaded', () => {
  const select = document.getElementById('autoSizingSelect');
  if (select.value) {
    const targetId = select.selectedOptions[0].dataset.id;
    if (targetId) {
      document.querySelectorAll('.container[id]').forEach(el => el.classList.add('hidden'));
      document.querySelector(targetId)?.classList.remove('hidden');
    }
  }
});

? CSS 样式支持

.hidden {
  display: none !important;
}

⚠️ 注意事项： 避免直接操作 style.display，优先使用 CSS 类，利于维护与动画扩展； 确保 data-id 值与目标元素 id 严格一致（含 # 符号）； 添加空选项（value=""）并处理其 dataset.id 为 undefined，防止脚本报错； 若区块含必填字段，建议同步启用/禁用（element.disabled = true/false）以符合表单验证逻辑。

该方案轻量、可复用、无障碍友好（屏幕阅读器可感知显隐变化），适用于 Bootstrap 或任意 CSS 框架项目。