本文介绍如何利用 html `select` 元素的 `change` 事件与 css 类控制，实现根据用户选择动态显示对应时间区块（如“午间”或“晚间”），隐藏非选中区块，提升表单交互体验。
在构建响应式表单时，常需根据主控下拉菜单（<select>）的选择结果，动态切换后续字段的可见性。与单选按钮（radio）不同，下拉列表需监听 change 事件，并结合 data-* 属性精准定位目标区块。以下是完整、健壮且语义清晰的实现方案：
✅ 核心思路
- 为每个待切换区块添加统一类名（如 form-block），并用 data-target 或 id 明确关联关系；
- 利用 select 的 data-id 属性存储对应区块 ID（如 #midi / #soir）；
- 在 change 回调中：
① 隐藏所有 .form-block；
② 根据当前选中项的 data-id 值，显示对应区块。
✅ 推荐实现代码（现代、无内联 JS）
<!-- 主控下拉 -->
<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-id="#midi">Midi</option>
<option value="soir" data-id="#soir">Soir</option>
</select>
</div>
<!-- 午间区块 -->
<div class="form-block" id="midi" style="display: none;">
<p class="text-secondary text-center mt-5">Heure midi</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 class="form-block" id="soir" style="display: none;">
<p class="text-secondary text-center mt-4">Heure soir</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 类替代内联 style（更易维护） */
.form-block {
display: none;
}
.form-block.active {
display: block;
}// 初始化：确保默认选项不触发显示（可选）
document.addEventListener('DOMContentLoaded', () => {
const select = document.getElementById('autoSizingSelect');
const blocks = document.querySelectorAll('.form-block');
// 绑定 change 事件
select.addEventListener('change', function () {
const targetId = this.selectedOptions[0]?.dataset?.id;
// 隐藏全部区块
blocks.forEach(block => block.classList.remove('active'));
// 显示匹配区块（仅当有有效 targetId）
if (targetId && document.querySelector(targetId)) {
document.querySelector(targetId).classList.add('active');
}
});
// 【可选】首次加载时根据默认选中项自动显示（如需）
if (select.value) {
const initTarget = select.selectedOptions[0]?.dataset?.id;
if (initTarget) {
document.querySelector(initTarget)?.classList.add('active');
}
}
});⚠️ 注意事项
- 避免内联 onchange：推荐使用 addEventListener，便于解耦、复用和调试；
- 空值容错：检查 selectedOptions[0] 和 dataset.id 是否存在，防止脚本崩溃；
- HTML 结构一致性：确保 data-id 值与目标区块 id 完全匹配（含 # 符号）；
- 无障碍友好：隐藏区块仍保留在 DOM 中（display: none），屏幕阅读器默认跳过，符合 WCAG；
- Bootstrap 兼容性：.col-* 类无需额外处理，display: none 会自然移除其网格行为。
✅ 总结
该方案轻量、可扩展、无依赖，适用于任意数量的条件区块。只需为每个选项设置 data-id，为每个区块添加 form-block 类与对应 id，即可实现精准联动。后续如需支持多选联动、动画淡入或表单验证联动，也可在此基础上轻松增强。
