本文介绍如何使用原生 javascript 监听 `
在表单交互中，常需根据用户的选择动态控制后续字段的可见性——例如：当用户选择“Midi”（午间）时，仅显示午间时间选择器；选择“Soir”（晚间）时，则切换为晚间时间选择器。这种条件式表单展示能显著提升用户体验与表单逻辑清晰度。
实现的关键在于：
- 利用 <option> 的 data-id 属性精准关联目标区块（如 data-id="#midi" 指向 #midi 元素）；
- 通过 change 事件监听下拉框变化；
- 使用 document.querySelectorAll('.container') 统一管理所有待切换区块，并结合 classList.toggle('hidden') 或更精确的 show/hide 控制逻辑。
以下是完整、健壮且语义清晰的实现方案：
✅ 推荐实现（精准控制 + 无初始闪烁）
<!-- 下拉主控 -->
<div class="col-md-2">
<select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
<option value="">— Sélectionnez un service —</option>
<option value="midi" data-target="#midi">Midi</option>
<option value="soir" data-target="#soir">Soir</option>
</select>
</div>
<!-- 午间区块（默认显示） -->
<div id="midi" class="text-secondary text-center mt-5 form-section active">
<p><strong>Heure midi</strong></p>
<div class="col-md-4">
<select class="form-select text-secondary" name="heure_midi">
<option value=""></option>
<option value="12:00">12:00</option>
<option value="12:15">12:15</option>
<option value="12:30">12:30</option>
<option value="12:45">12:45</option>
<option value="13:00">13:00</option>
<option value="13:15">13:15</option>
<option value="13:30">13:30</option>
<option value="13:45">13:45</option>
<option value="14:00">14:00</option>
</select>
</div>
</div>
<!-- 晚间区块（默认隐藏） -->
<div id="soir" class="text-secondary text-center mt-4 form-section hidden">
<p><strong>Heure soir</strong></p>
<div class="col-md-4">
<select class="form-select text-secondary" name="heure_soir">
<option value=""></option>
<option value="19:00">19:00</option>
<option value="19:15">19:15</option>
<option value="19:30">19:30</option>
<option value="19:45">19:45</option>
<option value="20:00">20:00</option>
<option value="20:15">20:15</option>
<option value="20:30">20:30</option>
<option value="20:45">20:45</option>
<option value="21:00">21:00</option>
</select>
</div>
</div>/* 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 逻辑（推荐放在 </body> 底部或 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');
}
}
});⚠️ 注意事项
- 避免 onchange="handleChange(this)" 内联写法：不利于维护和 SEO，推荐使用 addEventListener；
- 修复 HTML 错误：原示例中晚间时间选项重复写了 19:00（应为 20:00），已修正；
- 无障碍友好：为 .form-section 添加 aria-hidden="true/false" 并同步更新，可进一步提升可访问性；
- 表单提交前校验：隐藏字段仍存在于 DOM 中，其值会被提交；如需彻底禁用，可额外设置 disabled 属性或清空 name。
该方案简洁、可扩展（支持任意多组联动区块）、无第三方依赖，是现代表单动态交互的最佳实践之一。
立即学习“Java免费学习笔记（深入）”；
