本文介绍如何利用 html `select` 元素的 `change` 事件与 css 类控制，实现根据用户选择动态显示对应时间区块（如“午间”或“晚间”），隐藏非选中区块，提升表单交互体验。
在构建响应式表单时，常需根据主控下拉菜单（
✅ 核心思路
- 为每个待切换区块添加统一类名（如 form-block），并用 data-target 或 id 明确关联关系；
- 利用 select 的 data-id 属性存储对应区块 ID（如 #midi / #soir）；
- 在 change 回调中：
① 隐藏所有 .form-block；
② 根据当前选中项的 data-id 值，显示对应区块。
✅ 推荐实现代码（现代、无内联 JS）
/* 可选：使用 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，即可实现精准联动。后续如需支持多选联动、动画淡入或表单验证联动，也可在此基础上轻松增强。
