基于JavaScript实现下拉列表联动显示/隐藏表单字段

第一步：调整HTML结构 #

先把两个时段的完整区块分别用容器包裹，方便统一控制显示状态，同时利用Bootstrap的d-none类初始隐藏未选中的区块（默认选中Midi，所以隐藏Soir区块）：

<div class="col-md-2">
  <select class="form-select text-secondary mt-4" id="autoSizingSelect" name="service">
    <option value="midi" data-id="#midi">Midi</option>
    <option value="soir" data-id="#soir">Soir</option>
  </select>
</div>

<!-- Midi时段区块 -->
<div id="midi-block">
  <p class="text-secondary text-center mt-5">Heure midi</p>
  <div class="col-md-4">
    <select class="form-select text-secondary" id="midi" 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>

<!-- Soir时段区块 - 初始隐藏 -->
<div id="soir-block" class="d-none">
  <p class="text-secondary text-center mt-4">Heure soir</p>
  <div class="col-md-4">
    <select class="form-select text-secondary" id="soir" 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>

第二步：添加JavaScript逻辑 #

监听主下拉框的change事件，根据选中的值切换两个区块的显示状态，同时处理页面加载时的初始状态：

// 获取主下拉框和两个时段区块
const serviceSelect = document.getElementById('autoSizingSelect');
const midiBlock = document.getElementById('midi-block');
const soirBlock = document.getElementById('soir-block');

// 定义切换显示的函数
function toggleTimeBlocks(selectedValue) {
  if (selectedValue === 'midi') {
    midiBlock.classList.remove('d-none');
    soirBlock.classList.add('d-none');
  } else if (selectedValue === 'soir') {
    midiBlock.classList.add('d-none');
    soirBlock.classList.remove('d-none');
  }
}

// 页面加载时执行一次，确保初始状态正确
toggleTimeBlocks(serviceSelect.value);

// 监听下拉框变化事件
serviceSelect.addEventListener('change', function() {
  toggleTimeBlocks(this.value);
});

代码说明 #

• 用d-none类（Bootstrap内置类）控制元素显示/隐藏，符合Bootstrap设计规范，比直接操作style.display更简洁
• 封装toggleTimeBlocks函数，避免重复代码，同时支持页面加载时的初始化
• 修正了原Soir区块中20:00选项的value错误（原代码误写为19:00）

内容的提问来源于stack exchange，提问作者Bertou19