本文介绍如何使用原生 javascript 监听 `
在表单交互中，常需根据用户对下拉菜单（
✅ 推荐实现方式：基于 data-id 属性 + classList.toggle()
核心思路是：
- 为每个
- 在 change 事件处理器中，先隐藏所有相关区块，再根据当前选中项的 data-id 显示目标区块；
- 使用纯 CSS 控制显隐（推荐 display: none/block，避免影响布局流）。
以下是完整、可直接运行的代码示例：
Heure soir
? 关键注意事项
- 避免 onchange="handleChange(this)" 内联写法：现代最佳实践推荐使用 addEventListener，更易维护、支持事件解绑、避免全局污染；
- data-id 值必须为合法 CSS 选择器（如 #midi），确保 document.querySelector() 能准确获取元素；
- 初始化状态很重要：页面加载后应明确设置默认可见区块，否则可能出现“全黑”状态；
- 无障碍友好：隐藏区块仍保留在 DOM 中（非 remove()），屏幕阅读器可通过 aria-hidden 进一步优化（进阶可选）；
- Bootstrap 兼容性：本例使用 Bootstrap 5 的 d-none / d-block 工具类，若用其他框架，请替换为对应隐藏类（如 Tailwind 的 hidden / block）。
通过以上结构化实现，你不仅能精准控制表单字段的条件显示，还能保持代码可读性、可扩展性——未来新增选项（如 "matin"）只需添加 和对应区块即可，逻辑零修改。
