单击按钮转到不同的网址

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< /strong>

我想提一下，在这种情况下我需要按钮。 我不想通过下拉选择进入相应的网站。仅在单击按钮后。

先感谢您。

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>

接下来，向 select 添加一个 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 语句来检查在 select 列表中选择了哪个值，并使用 window.location 进行重定向用户访问适当的 URL。

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

Answer 5

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