如何实现基于Route筛选Position下拉选项的JavaScript功能

核心思路 #

先把城市、路线、位置的关联数据结构化存储，通过监听下拉框的change事件，动态更新下一级下拉框的选项和显示状态，实现逐级联动。

具体实现步骤 #

1. 基础HTML结构 #

搭好三个下拉框的架子，默认只显示城市选择框，路线和位置框初始隐藏：

<select id="citySelect">
  <option value="">选择城市</option>
  <option value="city1">城市A</option>
  <option value="city2">城市B</option>
</select>

<select id="routeSelect" style="display:none;">
  <option value="">选择路线</option>
</select>

<select id="positionSelect" style="display:none;">
  <option value="">选择位置</option>
</select>

2. 定义关联数据 #

用对象清晰存储层级关联，后续筛选直接取对应数据：

const locationData = {
  city1: {
    routes: {
      "route1": ["Pos1", "Pos2", "Pos3"],
      "route2": ["Pos4", "Pos5"]
    }
  },
  city2: {
    routes: {
      "route3": ["Pos6", "Pos7", "Pos8"],
      "route4": ["Pos9"]
    }
  }
};

3. 编写联动逻辑 #

给每个下拉框绑定change事件，动态更新下一级选项：

const citySel = document.getElementById('citySelect');
const routeSel = document.getElementById('routeSelect');
const posSel = document.getElementById('positionSelect');

// 城市选择后更新路线下拉框
citySel.addEventListener('change', function() {
  const selectedCity = this.value;
  // 重置后续下拉框
  routeSel.innerHTML = '<option value="">选择路线</option>';
  posSel.innerHTML = '<option value="">选择位置</option>';
  posSel.style.display = 'none';

  if (selectedCity) {
    routeSel.style.display = 'inline-block';
    // 填充路线选项
    const routes = locationData[selectedCity].routes;
    for (const routeKey in routes) {
      const opt = document.createElement('option');
      opt.value = routeKey;
      opt.textContent = `${routeKey} - ${routes[routeKey].join(' - ')}`;
      routeSel.appendChild(opt);
    }
  } else {
    routeSel.style.display = 'none';
  }
});

// 路线选择后更新位置下拉框
routeSel.addEventListener('change', function() {
  const selectedCity = citySel.value;
  const selectedRoute = this.value;
  posSel.innerHTML = '<option value="">选择位置</option>';

  if (selectedRoute) {
    posSel.style.display = 'inline-block';
    // 填充位置选项
    const positions = locationData[selectedCity].routes[selectedRoute];
    positions.forEach(pos => {
      const opt = document.createElement('option');
      opt.value = pos;
      opt.textContent = pos;
      posSel.appendChild(opt);
    });
  } else {
    posSel.style.display = 'none';
  }
});

4. 常见问题排查 #

• 检查DOM元素ID和JS中获取的ID是否完全一致，避免拼写错误
• 确认数据结构是否正确，比如城市对应的路线对象、路线对应的位置数组是否存在
• 确保JS代码在DOM加载完成后执行，否则会找不到元素。可以把代码包在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的联动逻辑代码放在这里
});

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