本文介绍如何使用原生 javascript 监听 `
在表单交互中，常需根据用户对下拉菜单（<select>）的选择，动态控制后续字段的可见性——例如仅当选择“Midi”时显示午间时间选项，选择“Soir”时切换至晚间时间。这比单选按钮（radio）稍复杂，因需精准匹配选项值与目标区块 ID，但实现起来同样简洁高效。
✅ 推荐实现方式：基于 data-id 属性 + classList.toggle()
核心思路是：
- 为每个 <option> 添加 data-id 属性，其值为对应区块的 CSS 选择器（如 #midi）；
- 在 change 事件处理器中，先隐藏所有相关区块，再根据当前选中项的 data-id 显示目标区块；
- 使用纯 CSS 控制显隐（推荐 display: none/block，避免影响布局流）。
以下是完整、可直接运行的代码示例：
<!-- 下拉选择控件 -->
<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="text-secondary text-center mt-5" id="midi">
<p>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="text-secondary text-center mt-4 d-none" id="soir">
<p>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：定义隐藏样式（Bootstrap 5 已含 d-none，此处为兼容说明） -->
<style>
.d-none { display: none !important; }
.d-block { display: block !important; }
</style><!-- JavaScript：响应式切换逻辑 -->
<script>
const selectEl = document.getElementById('autoSizingSelect');
const blocks = ['#midi', '#soir'];
// 初始化：默认显示 #midi，隐藏 #soir
document.querySelector('#midi').classList.remove('d-none');
document.querySelector('#soir').classList.add('d-none');
selectEl.addEventListener('change', function() {
const selectedOption = this.options[this.selectedIndex];
const targetId = selectedOption.dataset.id;
// 隐藏所有区块
blocks.forEach(id => {
const el = document.querySelector(id);
if (el) el.classList.add('d-none');
});
// 显示匹配的区块
if (targetId && document.querySelector(targetId)) {
document.querySelector(targetId).classList.remove('d-none');
}
});
</script>? 关键注意事项
- 避免 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"）只需添加 <option data-id="#matin">Matin</option> 和对应区块即可，逻辑零修改。
