如何实现下拉菜单选值后点击按钮在新标签页打开链接？

开发者阿泽

2026-8-13

问题：下拉菜单跳转链接无法在新标签页打开，如何修改？

我有一个下拉菜单，希望用户点击按钮后跳转到对应页面。当前脚本可实现跳转功能，但我希望链接在新标签页打开。尝试在链接旁添加'_blank'但无效，请问该如何修改？

我的HTML和JS代码如下：

<!DOCTYPE html>
<html>
      <select id="searchengine" name="searchengine" class="searchengineSelector">
        <option value="">Select an option</option>
        <option value="GO">Google</option>
        <option value="YA">Yahoo</option>
      </select>
      <div>
        <button class="searchSelect" id="search_button">Explore</button>
      </div>
</html>
<script>
  const links = {
  GO: 'https://www.google.com',
  YA: 'https://www.yahoo.com',
  }
  document.getElementById('search_button').addEventListener('click', () =>
    location.href = links[document.getElementById('searchengine').value])
</script>

解决方案

location.href只能在当前页面跳转，无法指定打开方式。要实现新标签页打开，需要改用window.open()方法，它支持通过第二个参数设置打开目标：

替换location.href = ...为window.open(链接地址, '_blank')
建议增加空值判断，避免用户未选择选项时触发无效跳转

修改后的完整脚本如下：

const links = {
  GO: 'https://www.google.com',
  YA: 'https://www.yahoo.com',
}
document.getElementById('search_button').addEventListener('click', () => {
  const selectedValue = document.getElementById('searchengine').value;
  // 判断是否选中有效选项
  if (selectedValue && links[selectedValue]) {
    // 用window.open在新标签页打开链接
    window.open(links[selectedValue], '_blank');
  }
})

说明：