从输入下拉菜单转到 URL答案

【问题标题】：Go to URL from input dropdown从输入下拉菜单转到 URL
【发布时间】：2020-11-02 11:36:46
【问题描述】：

我的网站上有一个下拉菜单，用户可以在其中选择不同的网站名称。在下拉列表旁边，我有一个提交按钮。

我希望用户从下拉列表中选择一个站点名称，当他们点击提交时，他们应该被重定向到一个特定的 url，并附加下拉值。

<form id="form" method="get">
   <option value="1">Website Name 1</option>
   <option value="2">Website Name 2</option>
   <option value="3">Website Name 3</option>

   <button class="btn" type="submit">GO!</button>
</form>

示例案例：

用户选择“网站名称 2”
用户点击“开始！”按钮
站点打开一个新窗口，目标为“https://example.com/site/2”

【问题讨论】：

标签： javascript html forms redirect input

【解决方案1】：

有很多方法可以做到这一点。但是，您可以尝试以下方式。在下拉值中添加要重定向到的完整 url，而不仅仅是值，然后单击按钮重定向到该站点。

确保按钮类型不是“提交”并附加一个带有 javascript 函数的点击事件。在 javascript 函数中，从下拉列表中读取选定的值并使用

window.location.href

重定向到该站点。

function redirect() {
  var value = document.getElementById("site").value;
  window.location.href = value;
  return ;
}

<form id="form" >
<select name="site" id ="site">
   <option value="https://Google.com/1">Google</option>
   <option value="https://stackoverflow.com/2">StackOverflow</option>
</select>
   <button class="btn" type="button" onclick="redirect()">GO!</button>
</form>

【讨论】：

【解决方案2】：

有多种方法可以实现此功能。我更喜欢使用最少的 HTML 并在 JavaScript 中处理所有内容。在我的示例中，我们将使用 EventListener 来完成此操作。

将您的 HTML 更改为：

<form id="form" method="get">
  <select id="selection">
     <option value="1">Website Name 1</option>
     <option value="2">Website Name 2</option>
     <option value="3">Website Name 3</option>
  </select>
   <button class="btn" type="submit">GO!</button>
</form>

然后你可以使用简单的 JavaScript 来完成你想要的：

let url = "https://example.com/site/";

document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
  let selection = document.getElementById('selection').value;
  console.log(url + selection);
  window.location.href = url + selection;
});

此答案假定所有 URL 都遵循 https://example.com/site/1 格式。如果不是，您可以将选项标签中的值更改为实际 URL，并从 JavaScript 中删除 URL 前缀。

【讨论】：