本文介绍如何基于 `
在表单交互中，常需根据用户对主下拉选项（如“Midi”或“Soir”）的选择，仅展示对应的时间选择区块，提升界面简洁性与用户体验。不同于单选按钮（radio），下拉列表（<select>）需监听 change 事件，并结合 DOM 操作精准控制目标元素的可见性。
✅ 推荐实现方案：基于 data-id 的精准切换
核心思路是：
- 为每个 <option> 添加 data-id 属性，指向其关联区块的 ID（如 #midi、#soir）；
- 在 change 事件处理器中，先隐藏所有候选区块，再根据当前选中项的 data-id 显示对应区块；
- 使用 CSS 类（如 .hidden）控制显隐，语义清晰且便于样式扩展。
? HTML 结构（关键修改）
确保两个时间区块均包裹在统一容器中，并添加 id 与初始状态：
<!-- 主下拉框 -->
<div class="col-md-2">
<select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
<option value="">— Sélectionnez —</option>
<option value="midi" data-id="#midi">Midi</option>
<option value="soir" data-id="#soir">Soir</option>
</select>
</div>
<!-- 时间区块容器（均设为 hidden 初始状态） -->
<div id="midi" class="text-secondary text-center mt-5 container hidden">
<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>
<!-- 其他选项... -->
</select>
</div>
</div>
<div id="soir" class="text-secondary text-center mt-4 container hidden">
<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>
<!-- 其他选项... -->
</select>
</div>
</div>? JavaScript 控制逻辑（推荐现代写法）
document.getElementById('autoSizingSelect').addEventListener('change', function() {
const selectedOption = this.options[this.selectedIndex];
const targetId = selectedOption.dataset.id;
// 隐藏所有区块
document.querySelectorAll('.container[id]').forEach(el => {
el.classList.add('hidden');
});
// 显示匹配的区块（若存在）
if (targetId && document.querySelector(targetId)) {
document.querySelector(targetId).classList.remove('hidden');
}
});
// 页面加载时，根据默认选中项初始化显示（可选）
window.addEventListener('DOMContentLoaded', () => {
const select = document.getElementById('autoSizingSelect');
if (select.value) {
const targetId = select.selectedOptions[0].dataset.id;
if (targetId) {
document.querySelectorAll('.container[id]').forEach(el => el.classList.add('hidden'));
document.querySelector(targetId)?.classList.remove('hidden');
}
}
});? CSS 样式支持
.hidden {
display: none !important;
}⚠️ 注意事项： 避免直接操作 style.display，优先使用 CSS 类，利于维护与动画扩展； 确保 data-id 值与目标元素 id 严格一致（含 # 符号）； 添加空选项（value=""）并处理其 dataset.id 为 undefined，防止脚本报错； 若区块含必填字段，建议同步启用/禁用（element.disabled = true/false）以符合表单验证逻辑。
该方案轻量、可复用、无障碍友好（屏幕阅读器可感知显隐变化），适用于 Bootstrap 或任意 CSS 框架项目。
立即学习“Java免费学习笔记（深入）”；
