如何通过下拉选择框与提交按钮实现页面跳转到不同URL

嘿，我来帮你搞定这个需求！你的基础表单已经搭好了，只需要加一点点逻辑，就能实现点击提交后跳转到选中的目标URL。我给你两种实用的方案，你可以根据需求选：

方案1：监听表单提交事件（推荐，逻辑更清晰） #

我们给表单加个提交事件监听，先拦住表单默认的提交行为，然后拿到下拉框选好的URL，直接跳过去就行。修改后的代码是这样的：

<form id="redirectForm">
  <select id="urlSelect">
    <option selected="">- Select -</option>
    <option value="https://google.com">One</option>
    <option value="https://gmail.com">Two</option>
    <option value="https://yahoo.com">Three</option>
  </select>
  <input type="submit" value="Submit">
</form>

<script>
document.getElementById('redirectForm').addEventListener('submit', function(e) {
  // 阻止表单默认的提交行为，避免页面刷新
  e.preventDefault();
  // 获取下拉框选中的URL值
  const selectedUrl = document.getElementById('urlSelect').value;
  // 检查用户是否选了有效选项，不是默认的提示项
  if (selectedUrl) {
    // 跳转到选中的目标URL
    window.location.href = selectedUrl;
  } else {
    // 如果没选，给用户一个提示
    alert('请选择一个选项哦！');
  }
});
</script>

为啥推荐这个方案？ #

• 逻辑直观，提交时再处理跳转，完全符合用户的操作预期
• 可以轻松添加校验逻辑，避免用户点提交时还没选任何选项的无效操作

方案2：动态修改表单的action属性 #

另一种方式是实时更新表单的action属性，让表单提交时直接用选中的URL作为跳转目标。代码如下：

<form id="redirectForm" action="" method="GET">
  <select id="urlSelect" onchange="document.getElementById('redirectForm').action = this.value;">
    <option selected="">- Select -</option>
    <option value="https://google.com">One</option>
    <option value="https://gmail.com">Two</option>
    <option value="https://yahoo.com">Three</option>
  </select>
  <input type="submit" value="Submit">
</form>

<script>
// 可选：提交前再加一层校验，防止用户选默认提示项就提交
document.getElementById('redirectForm').addEventListener('submit', function(e) {
  if (!document.getElementById('urlSelect').value) {
    e.preventDefault();
    alert('请选择一个选项哦！');
  }
});
</script>

这个方案的特点： #

• 依赖表单原生的提交机制，不需要手动写跳转逻辑
• 下拉框选项变化时就更新表单的action，提交时直接生效

备注：内容来源于stack exchange，提问作者Breon