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

核心原理与准备

实现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>

优化建议与总结

以上代码展示了最基础且通用的实现方式。若追求更简洁的代码，在第1种场景中也可直接使用：
<select onchange="self.location.href=options[selectedIndex].value">

需要注意的是，现代前端框架（如Vue、React）通常采用数据绑定方式处理此类逻辑，但在纯HTML/JS环境或CMS模板中，上述原生写法依然高效可靠。使用时请替换value中的实际URL为真实有效的地址。

以上就是JavaScript实现select标签跳转网页方法的详细内容，更多关于JavaScript下拉菜单导航的资料请关注本站其它相关文章！