html - 点击按钮转到不同的网址

Question

我需要创建 html 代码，如果用户从下拉列表中选择一个项目并单击按钮，那么它将转到相应的链接。

<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>

如果用户从下拉列表中选择 Google 并单击按钮，则页面应重定向到www.google.com，如果选择 yahoo 并单击按钮应转到www.yahoo.com

我想提一下，在这种情况下我需要按钮。我不想在下拉选择中转到相应的站点。仅在单击按钮后。

先感谢您。

Answer 1

HTML：

<select name="myList" id="ddlMyList">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.ask.com">Ask</option>
</select>

<input type="button" value="Go To Site!" onclick="NavigateToSite()" />

JavaScript：

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.location = selectedVal;
}

您还可以通过执行以下操作在新窗口中打开该站点：

function NavigateToSite(){
    var ddl = document.getElementById("ddlMyList");
    var selectedVal = ddl.options[ddl.selectedIndex].value;

    window.open(selectedVal)
}

作为旁注，您的选项标签格式不正确。当标签包含内容时，您不应该使用 <... /> 快捷方式。

Answer 2

首先，将选项值更改为您要定位的 URL：

<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>

接下来，向选择添加一个 ID，以便您可以定位它：

<select name="myList" id="myList">

最后，在 select 控件中添加一个 onclick 方法来处理重定向：

<input type="button" onclick="document.location.href=document.getElementById('myList').value">

Answer 3

<select name="myList">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.ask.com">Ask</option>
</select>

<input type="button" onclick="window.location=document.myList.value" />

Answer 4

使用 JavaScript，您可以将onclick事件附加到按钮。在事件处理程序中，您可以使用语句来检查在列表if中选择了哪个值，并使用将用户重定向到适当的 URL。selectwindow.location

我建议将value元素的更改option为所需的 URL，然后您可以简单地获取该值并转到该 URL，而不必检查选择了哪个选项。

Answer 5

onclick()="window.location.href='page.html'"