WordPress Contact Form 7 条件跳转需求：按下拉选项跳转对应页面

嘿，这个需求我经常碰到，给你几个不同场景下的实用解决方案，都是完全适配同域名跳转的：

如果你的页面是纯静态的，不需要复杂逻辑，这个方案最直接，代码量极小：

<select onchange="if(this.value) window.location.href=this.value">
  <option value="">请选择页面</option>
  <option value="/page-a.html">Option A</option>
  <option value="/page-b.html">Option B</option>
  <!-- 可按需添加更多选项 -->
</select>

逻辑说明：当用户选择有值的选项时，直接通过window.location.href跳转到对应路径，空选项不会触发跳转，避免误操作。

如果需要添加额外逻辑（比如跳转前验证、加载提示），推荐把HTML结构和JS逻辑分开，更符合代码规范：

HTML结构 #

<select id="pageSelector">
  <option value="">请选择页面</option>
  <option value="/page-a.html">Option A</option>
  <option value="/page-b.html">Option B</option>
</select>

JavaScript逻辑 #

// 获取下拉菜单元素
const pageSelector = document.getElementById('pageSelector');

// 绑定change事件监听
pageSelector.addEventListener('change', handlePageNavigation);

function handlePageNavigation() {
  const targetPath = this.value;
  // 仅当选择有效路径时跳转
  if (targetPath) {
    // 同域名下直接跳转（如需新标签页打开，换成window.open(targetPath, '_blank')）
    window.location.href = targetPath;
    
    // 可在这里添加额外逻辑，比如：
    // console.log(`正在跳转到：${targetPath}`);
    // document.body.classList.add('loading');
  }
}

优势：逻辑和结构分离，便于后续修改和扩展，比如可以轻松添加权限校验或加载状态。

如果你的项目用了前端框架，这里以Vue为例给出适配方案（其他框架逻辑类似）：

单页应用（使用Vue Router） #

<template>
  <select v-model="selectedPath" @change="navigate">
    <option value="">请选择页面</option>
    <option value="/page-a">Option A</option>
    <option value="/page-b">Option B</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPath: ''
    };
  },
  methods: {
    navigate() {
      if (this.selectedPath) {
        // 使用Vue Router跳转（无刷新）
        this.$router.push(this.selectedPath);
      }
    }
  }
};
</script>

多页应用（普通跳转） #

如果不是单页应用，直接用原生跳转逻辑即可：

<template>
  <select v-model="selectedPath" @change="navigate">
    <option value="">请选择页面</option>
    <option value="/page-a.html">Option A</option>
    <option value="/page-b.html">Option B</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPath: ''
    };
  },
  methods: {
    navigate() {
      if (this.selectedPath) {
        window.location.href = this.selectedPath;
      }
    }
  }
};
</script>

• 所有目标路径请使用同域名相对路径，比如/page-a.html或./subfolder/page-c.html，避免跨域问题。
• 保留空的默认选项，防止页面加载时自动跳转。
• 如果需要在新标签页打开，使用window.open(targetPath, '_blank')，但注意部分浏览器可能拦截非用户主动触发的弹窗（下拉change事件触发的跳转一般不会被拦截）。

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