三级联动下拉框选择完成后跳转指定URL功能开发求助

嘿，我来帮你搞定这个三级下拉框的跳转需求！针对48种组合的场景，咱们用配置化的方式来实现，既清晰又好维护，不用写一堆冗余的判断逻辑。

第一步：完善HTML结构（确保下拉框选项有实际值） #

先把你提供的HTML补全选项值（示例里我加了一些模拟选项，你可以替换成实际的48种组合对应的选项）：

<form name="myform" id="myForm">
  <select name="optone" id="stateSel" size="1">
    <option value="" selected="selected">Select size</option>
    <option value="3000mm x 3000mm">3000mm x 3000mm</option>
    <option value="2000mm x 2000mm">2000mm x 2000mm</option>
    <!-- 其他尺寸选项 -->
  </select>
  <br><br>
  <select name="opttwo" id="countySel" size="1">
    <option value="" selected="selected">Please select size first</option>
    <option value="无侧墙">无侧墙</option>
    <option value="左侧墙">左侧墙</option>
    <!-- 其他侧墙选项 -->
  </select>
  <br><br>
  <select name="optthree" id="citySel" size="1">
    <option value="" selected="selected">Please select back wall first</option>
    <option value="无后墙">无后墙</option>
    <option value="有后墙">有后墙</option>
    <!-- 其他后墙选项 -->
  </select>
</form>

第二步：用配置对象管理所有跳转规则 #

把48种组合和对应的URL都放在一个对象里，这样后续修改、新增组合都超级方便，不用动逻辑代码：

// 核心跳转规则配置：键是「尺寸|侧墙|后墙」的组合，值是目标URL
const jumpRules = {
  "3000mm x 3000mm|无侧墙|无后墙": "https://google.com",
  "3000mm x 3000mm|左侧墙|有后墙": "https://example.com/page1",
  "2000mm x 2000mm|无侧墙|有后墙": "https://example.com/page2",
  // 剩下的45种组合都按这个格式添加进来
};

第三步：编写跳转逻辑 #

监听下拉框的选择事件，当三个下拉框都选中有效选项时，自动匹配规则并跳转：

// 获取三个下拉框元素
const sizeSel = document.getElementById('stateSel');
const sideWallSel = document.getElementById('countySel');
const backWallSel = document.getElementById('citySel');

// 存储上一次的组合，防止重复跳转
let lastCombination = '';

// 检查并执行跳转的函数
function checkAndJump() {
  // 获取当前三个选项的值
  const size = sizeSel.value.trim();
  const sideWall = sideWallSel.value.trim();
  const backWall = backWallSel.value.trim();

  // 只要有一个选项为空，就不执行任何操作
  if (!size || !sideWall || !backWall) return;

  // 拼接成组合键，用来匹配跳转规则
  const currentCombination = `${size}|${sideWall}|${backWall}`;

  // 防止重复跳转（比如用户重复选同一个组合）
  if (currentCombination === lastCombination) return;

  // 匹配到规则就跳转
  if (jumpRules[currentCombination]) {
    lastCombination = currentCombination;
    // 这里可以用window.location.href跳转，或者window.open新开窗口（根据需求选）
    window.location.href = jumpRules[currentCombination];
  } else {
    // 如果没有匹配到规则，可以提示用户，或者留空不处理
    console.log('暂无对应跳转地址，请检查选择');
  }
}

// 给第三个下拉框添加change事件（选完最后一项触发）
backWallSel.addEventListener('change', checkAndJump);

// 可选：如果用户修改前面的选项后重新选最后一项，也能触发，上面的逻辑已经覆盖了
// 也可以给所有下拉框都加change事件，不过其实第三个的change已经足够
// sizeSel.addEventListener('change', checkAndJump);
// sideWallSel.addEventListener('change', checkAndJump);

关键说明 #

• 配置化管理：所有跳转规则都集中在jumpRules对象里，48种组合直接按格式添加即可，逻辑代码完全不用改，维护成本极低。
• 防重复跳转：通过lastCombination记录上一次的组合，避免用户重复选择同一个选项时多次跳转。
• 灵活性：如果需要新开窗口跳转，把window.location.href改成window.open(jumpRules[currentCombination], '_blank')即可。

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