如何实现HTML层级选择跳转交互流？用于故障排查引导

需求说明 #

需要构建一套基于HTML的层级选择交互，用于故障排查步骤引导：

• 选择「Cisco」后自动显示设备类型选择框
• 选择「PE Router」后显示对应具体设备选择框，以此类推完成流程
• 选中选项后直接跳转至对应下一步（比如选择Yes直接进入下一个选项）

实现步骤与代码示例 #

1. 页面结构调整

给每个选择模块设置唯一ID，初始隐藏后续的选择模块（除第一个），避免页面混乱：

<style>
/* 初始隐藏所有后续选择模块 */
.select-group {
  margin-bottom: 1.5rem;
}
.hidden {
  display: none;
}
</style>

<div class="select-group">
  <label for="vendor-select">Choose device vendor</label><br>
  <select class="detail-ta" id="vendor-select" size="3">
    <option value="">-- 请选择品牌 --</option>
    <option value="Cisco">Cisco</option>
    <option value="Juniper">Juniper</option>
    <option value="Rad">Rad</option>
    <option value="Adva">Adva</option>
  </select>
</div>

<!-- Cisco设备类型选择模块，初始隐藏 -->
<div class="select-group hidden" id="cisco-type-group">
  <label for="cisco-type-select">Choose Cisco Device Type</label><br>
  <select class="detail-ta" id="cisco-type-select" size="3">
    <option value="">-- 请选择设备类型 --</option>
    <option value="PE Router">PE Router</option>
    <option value="Router">Router</option>
    <option value="Switch">Switch</option>
  </select>
</div>

<!-- Cisco PE设备选择模块，初始隐藏 -->
<div class="select-group hidden" id="cisco-pe-group">
  <label for="cisco-pe-select">Choose Cisco PE Device</label><br>
  <select class="detail-ta" id="cisco-pe-select" size="4">
    <option value="">-- 请选择具体设备 --</option>
    <option value="9000">Cisco ASR 9000</option>
    <option value="1000">Cisco ASR 1000</option>
    <option value="920">Cisco ASR 920</option>
    <option value="560">NCS 560</option>
  </select>
</div>

<!-- 流程完成提示，初始隐藏 -->
<div class="select-group hidden" id="complete-group">
  <p>✅ 故障排查路径选择完成，请继续后续操作</p>
</div>

2. 交互逻辑实现

用JavaScript监听每个选择框的change事件，根据选中值显示对应下一级模块，同时自动滚动到下一个选择框实现“跳转下一步”的效果：

// 获取所有选择元素和模块
const vendorSelect = document.getElementById('vendor-select');
const ciscoTypeGroup = document.getElementById('cisco-type-group');
const ciscoTypeSelect = document.getElementById('cisco-type-select');
const ciscoPEGroup = document.getElementById('cisco-pe-group');
const ciscoPESelect = document.getElementById('cisco-pe-select');
const completeGroup = document.getElementById('complete-group');

// 品牌选择事件
vendorSelect.addEventListener('change', function() {
  // 先隐藏所有后续模块
  ciscoTypeGroup.classList.add('hidden');
  ciscoPEGroup.classList.add('hidden');
  completeGroup.classList.add('hidden');

  // 如果选中Cisco，显示设备类型选择
  if (this.value === 'Cisco') {
    ciscoTypeGroup.classList.remove('hidden');
    // 自动滚动到下一个选择框并聚焦
    ciscoTypeSelect.scrollIntoView({ behavior: 'smooth' });
    ciscoTypeSelect.focus();
  }
  // 可在此添加其他品牌的分支逻辑
});

// Cisco设备类型选择事件
ciscoTypeSelect.addEventListener('change', function() {
  ciscoPEGroup.classList.add('hidden');
  completeGroup.classList.add('hidden');

  // 如果选中PE Router，显示具体设备选择
  if (this.value === 'PE Router') {
    ciscoPEGroup.classList.remove('hidden');
    ciscoPESelect.scrollIntoView({ behavior: 'smooth' });
    ciscoPESelect.focus();
  } else if (this.value) {
    // 选其他类型直接进入完成步骤
    completeGroup.classList.remove('hidden');
    completeGroup.scrollIntoView({ behavior: 'smooth' });
  }
});

// Cisco PE设备选择事件
ciscoPESelect.addEventListener('change', function() {
  if (this.value) {
    completeGroup.classList.remove('hidden');
    completeGroup.scrollIntoView({ behavior: 'smooth' });
  }
});

3. 扩展说明

• 若需添加Yes/No分支逻辑，给对应选择控件（单选/下拉）添加change事件，判断选中值后显示对应步骤模块即可
• 可通过新增select-group和对应JS逻辑，支持更多品牌、设备类型的分支
• 样式可按需调整，比如修改size属性改变下拉框高度，或自定义detail-ta类的样式

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