JavaScript实现select下拉菜单页面跳转的4种常用方法

云舒

发布时间：2026-10-14| 3人浏览过

原创

在Web开发中，经常需要通过下拉列表（select）快速切换页面或打开新链接。相比复杂的生成代码，使用原生JavaScript结合location.href或window.open可以实现极简的跳转逻辑。本文将演示四种常见场景的代码实现。

核心原理与准备

实现select跳转主要依赖两个关键属性或方法：

当前页跳转：修改location.href或window.location.href的值，使浏览器加载新URL。
新窗口跳转：调用window.open(url)，在新标签页或窗口中打开指定链接。
获取选中值：通过this.value或this.options[this.selectedIndex].value获取用户选择的option对应的href属性值。

第1步：当前页面直接跳转

当用户在下拉菜单中改变选项时，页面立即刷新至目标地址。此方法适用于内部快速导航。

操作要点：在select标签上绑定onchange事件，直接赋值location.href。

<select name="jump" onchange="javascript:location.href=this.value;">
  <option value="https://www.example.com" selected>首页</option>
  <option value="https://www.baidu.com">百度</option>
  <option value="https://www.sina.com.cn">新浪</option>
</select>

第2步：新页面弹出跳转

选择选项后，不刷新当前页面，而是在新窗口或新标签页打开链接。适合跳转到外部独立内容。

操作要点：使用window.open()替代location.href，确保新窗口不被拦截（部分浏览器可能拦截非用户主动点击弹出的窗口，但在

<select name="newWin" onchange="javascript:window.open(this.options[this.selectedIndex].value)">
  <option value="https://www.example.com" selected>首页</option>
  <option value="https://www.qq.com">腾讯</option>
  <option value="https://www.163.com">网易</option>
</select>

第3步：表单内点击按钮跳转（当前页）

将select放入form中，用户选定后需点击“提交”按钮才执行跳转。这种方式提供了二次确认的操作空间。

操作要点：在input type="button"的onclick事件中，通过表单对象引用获取选中值，并修改location.href。

<form name="frm1" action="#">
  <select name="page1">
    <option value="https://www.example.com" selected>首页</option>
    <option value="https://www.taobao.com">淘宝</option>
  </select>
  <input type="button" value="跳转" onclick="javascript:location.href=document.frm1.page1.options[document.frm1.page1.selectedIndex].value;" />
</form>

第4步：表单内点击按钮跳转（新窗口）

同上，但点击按钮后在新窗口打开链接。

操作要点：按钮点击事件中调用window.open()。

<form name="frm2" action="#">
  <select name="page2">
    <option value="https://www.example.com" selected>首页</option>
    <option value="https://www.jd.com">京东</option>
  </select>
  <input type="button" value="新窗口打开" onclick="javascript:window.open(document.frm2.page2.options[document.frm2.page2.selectedIndex].value)" />
</form>