基于用户首次选择实现HTML+JS下拉框预选与过滤的技术问题

针对你提出的下拉框联动需求，以下是修正并完善后的实现代码，解决了原代码中未处理「选择C时仅显示Level4和Level5」的问题，同时修正了HTML中的错误：

修正后的HTML代码 #

<form>
  <div class="form-group">
    <label for="DG">Decision Group:</label>
    <select name="DG" id="DG">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option> <!-- 修正原错误：显示文本与value统一 -->
    </select>
  </div>

  <div class="form-group">
    <label for="STG">STGCD:</label>
    <select name="STG" id="STG">
      <option value="LVL 0">Level 0</option>
      <option value="LVL 3">Level 3</option>
      <option value="LVL 4">Level 4</option>
      <option value="LVL 5">Level 5</option>
    </select>
  </div>
</form>

完善后的JS代码 #

const DGSelect = document.getElementById('DG');
const STGSelect = document.getElementById('STG');
// 保存STG下拉框的所有初始选项，用于后续恢复
const originalSTGOptions = Array.from(STGSelect.options).map(opt => ({
  value: opt.value,
  text: opt.text
}));

// 初始化清空选中值
STGSelect.value = '';
DGSelect.value = '';

// 绑定下拉框变更事件
DGSelect.addEventListener('change', preselectSTG);

function preselectSTG() {
  const selectedDGValue = DGSelect.value;

  // 先清空STG的现有选项
  STGSelect.innerHTML = '';

  switch(selectedDGValue) {
    case 'A':
      // 恢复所有选项并预选Level3
      originalSTGOptions.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.value;
        option.textContent = opt.text;
        STGSelect.appendChild(option);
      });
      STGSelect.value = 'LVL 3';
      break;
    case 'B':
      // 恢复所有选项并预选Level0
      originalSTGOptions.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.value;
        option.textContent = opt.text;
        STGSelect.appendChild(option);
      });
      STGSelect.value = 'LVL 0';
      break;
    case 'C':
      // 仅添加Level4和Level5选项，并预选Level4
      const filteredOptions = originalSTGOptions.filter(opt => 
        opt.value === 'LVL 4' || opt.value === 'LVL 5'
      );
      filteredOptions.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.value;
        option.textContent = opt.text;
        STGSelect.appendChild(option);
      });
      STGSelect.value = 'LVL 4';
      break;
    default:
      // 恢复所有选项并清空选中值
      originalSTGOptions.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.value;
        option.textContent = opt.text;
        STGSelect.appendChild(option);
      });
      STGSelect.value = '';
      DGSelect.value = '';
  }
}

关键逻辑说明 #

1. 保存初始选项：提前存储STG下拉框的所有选项，避免切换时丢失原始数据；
2. 事件绑定：通过addEventListener监听DG下拉框的变更事件，自动触发联动逻辑；
3. 选项过滤与恢复：
   • 选择A/B时，恢复STG的全部选项并设置对应预选值；
   • 选择C时，仅保留Level4和Level5的选项并预选Level4；
   • 选择其他值时，恢复原始选项并清空选中状态。

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