如何通过 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
立即学习“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 框架项目。