通过监听 `
在构建动态表单时，常需根据用户对下拉菜单（<select>）的选择，仅显示与之关联的后续字段（如“午间时段”或“晚间时段”），提升界面简洁性与用户体验。本教程将手把手教你用原生 JavaScript 实现这一功能，无需依赖 jQuery 或框架。
✅ 实现原理
核心思路是：
- 为每个 <option> 添加 data-id 属性，其值为对应区块的 CSS ID（如 #midi、#soir）；
- 在 <select> 上绑定 change 事件，获取选中项的 data-id；
- 隐藏所有目标区块，再仅显示匹配该 data-id 的区块。
? 完整示例代码
HTML 结构（关键部分）：
<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 id="midi" class="text-secondary text-center mt-5 form-block">
<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 id="soir" class="text-secondary text-center mt-4 form-block d-none">
<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 类，或自定义）：
立即学习“Java免费学习笔记（深入）”；
/* 可选：兼容旧版或自定义隐藏类 */
.form-block.d-none { display: none !important; }JavaScript（推荐现代写法，避免内联事件）：
document.addEventListener('DOMContentLoaded', () => {
const select = document.getElementById('autoSizingSelect');
const blocks = document.querySelectorAll('.form-block');
select.addEventListener('change', function() {
const targetId = this.selectedOptions[0]?.dataset.id;
// 隐藏全部区块
blocks.forEach(block => block.classList.add('d-none'));
// 显示匹配的区块（若存在）
if (targetId && document.querySelector(targetId)) {
document.querySelector(targetId).classList.remove('d-none');
}
});
// 初始化：默认显示第一个选项对应的区块（可选）
if (select.value === 'midi') {
document.getElementById('midi').classList.remove('d-none');
}
});⚠ 注意事项
- 确保每个 data-id 值与目标区块的 id 完全一致（含 # 符号）；
- 使用 document.querySelectorAll('.form-block') 统一管理区块，便于扩展更多选项；
- 添加 DOMContentLoaded 保证 DOM 加载完成后再绑定事件；
- 若使用 Bootstrap 5+，优先使用内置工具类 d-none / d-block，语义清晰且响应式友好；
- 建议为 <select> 添加默认空选项（value=""），避免页面加载时误触发显示逻辑。
通过以上方式，你就能轻松实现下拉选择驱动的表单字段动态切换——简洁、健壮、易于维护。
