如何通过下拉选择动态显示或隐藏表单字段（JavaScript 实现）

聖光之護 2026-01-24 00:00:00 次阅读

本文介绍如何使用原生 javascript 监听 `

在表单交互中，常需根据用户的选择动态控制后续字段的可见性——例如：当用户选择“Midi”（午间）时，仅显示午间时间选择器；选择“Soir”（晚间）时，则切换为晚间时间选择器。这种条件式表单展示能显著提升用户体验与表单逻辑清晰度。

实现的关键在于：

利用
通过 change 事件监听下拉框变化；
使用 document.querySelectorAll('.container') 统一管理所有待切换区块，并结合 classList.toggle('hidden') 或更精确的 show/hide 控制逻辑。

以下是完整、健壮且语义清晰的实现方案：

✅ 推荐实现（精准控制 + 无初始闪烁）

Heure midi

Heure soir

/* CSS 控制显隐 */
.form-section {
  transition: opacity 0.2s ease, max-height 0.3s ease;
}
.form-section.hidden {
  display: none;
}
/* 可选：添加淡入效果（需配合 JS 移除 hidden 后再加 active） */
.form-section.active {
  opacity: 1;
}

// JavaScript 逻辑（推荐放在  底部或 DOMContentLoaded 中）
document.addEventListener('DOMContentLoaded', () => {
  const selectEl = document.getElementById('autoSizingSelect');
  const sections = document.querySelectorAll('.form-section');

  selectEl.addEventListener('change', function () {
    const targetId = this.selectedOptions[0]?.dataset.target;

    // 隐藏所有区块
    sections.forEach(sec => sec.classList.add('hidden'));

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

  // 初始化：默认显示第一个有效选项对应区块（可选）
  if (selectEl.value) {
    const initTarget = selectEl.selectedOptions[0]?.dataset.target;
    if (initTarget) {
      sections.forEach(s => s.classList.add('hidden'));
      document.querySelector(initTarget)?.classList.remove('hidden');
    }
  }
});