如何实现下拉菜单选择选项后直接跳转至指定页面

嘿，这个需求挺常见的，我给你两种简单靠谱的实现方法，都能达到你想要的效果：

方法一：纯HTML内联事件（快速实现） #

直接在<select>标签上添加onchange事件，当用户选择不同选项时触发跳转逻辑：

<select onchange="if (this.value !== 'Number') window.location.href = this.value + '.html';">
  <option label="Pick your number" value="Number" selected="selected">Pick your number</option>
  <option label="1" value="one">1</option>
  <option label="2" value="two">2</option>
  <option label="3" value="three">3</option>
</select>

说明：

• onchange事件会在用户选择新选项时触发
• 判断this.value !== 'Number'是为了避免用户选择默认的占位选项时跳转
• 用window.location.href实现页面跳转，把选中的value和.html拼接成目标页面地址

方法二：HTML与JS分离（更易维护） #

如果追求代码的可维护性，推荐把逻辑单独写到JS里，给<select>加个ID来绑定事件：

<select id="numberSelector">
  <option label="Pick your number" value="Number" selected="selected">Pick your number</option>
  <option label="1" value="one">1</option>
  <option label="2" value="two">2</option>
  <option label="3" value="three">3</option>
</select>

<script>
// 获取下拉菜单元素
const numberSelect = document.getElementById('numberSelector');
// 绑定change事件监听
numberSelect.addEventListener('change', function() {
  const selectedVal = this.value;
  // 排除默认选项，执行跳转
  if (selectedVal !== 'Number') {
    window.location.href = `${selectedVal}.html`;
  }
});
</script>

小提示：如果你的目标页面是完整URL（比如https://example.com/two.html），可以直接把选项的value设为完整地址，这样跳转逻辑里就不用拼接.html了，直接用window.location.href = this.value即可。

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