select 下拉框实现超链接跳转「一共6种完整不同方案」

先说明：select / option 原生没有 href 属性，所有跳转都要靠 JS / 表单实现。

方法1：onchange 原生一行极简（最常用）

选中立刻跳转

<select onchange="location.href=this.value">
  <option value="">请选择</option>
  <option value="https://www.baidu.com">百度</option>
  <option value="demo.html">本地页面</option>
</select>

方法2：单独按钮点击跳转（防误操作）

先选，点按钮再走链接

<select id="sel">
  <option value="https://www.baidu.com">百度</option>
  <option value="https://www.qq.com">腾讯</option>
</select>
<button onclick="location.href=document.getElementById('sel').value">前往</button>

方法3：JS 事件监听（结构与JS分离，推荐规范写法）

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

<script>
  const sel = document.getElementById('linkSelect');
  sel.addEventListener('change', function(){
    let url = this.value;
    if(url) location.assign(url);
  })
</script>

方法4：表单 Form 提交实现（无复杂JS，老式项目常用）

<form onsubmit="this.action = this.sel.value">
  <select name="sel">
    <option value="">请选择</option>
    <option value="https://www.baidu.com">百度</option>
  </select>
  <button type="submit">跳转</button>
</form>

方法5：自定义 data-href 属性（value存ID，链接单独存）

适合后台：value 存id，链接放自定义属性

<select id="sel2">
  <option data-href="https://www.baidu.com" value="1">百度</option>
  <option data-href="https://www.qq.com" value="2">腾讯</option>
</select>

<script>
document.getElementById("sel2").onchange = function(){
  let href = this.options[this.selectedIndex].dataset.href;
  location.href = href;
}
</script>

方法6：新标签页打开（模拟 a标签 target="_blank"）

<select onchange="this.value && window.open(this.value,'_blank')">
  <option value="">新窗口打开</option>
  <option value="https://www.baidu.com">百度</option>
</select>

核心原理总结

1. 利用 option 的 value 存放跳转地址

2. 通过 onchange / 点击事件 / 表单提交

3. 核心跳转API：

• 本页跳转：location.href = 地址

• 新页跳转：window.open(地址,'_blank')