Html 单击按钮转到不同的网址

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6387572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:09:26  来源:igfitidea点击:

Go to different url on clicking button

htmlbuttonclick

提问by Sangram Nandkhile

i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.

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

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

if user selects Google from drop down list and clicks button, then page should be redirected to www.google.comand if it selects yahoo and clicks button should go to www.yahoo.com

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

I would like to mention that I need The button in this scenario. I don't want to go respective site on drop down selection.Only after clicking the button.

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

Thank you in advance.

先感谢您。

回答by James Hill

HTML:

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:

JavaScript:

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

    window.location = selectedVal;
}

You could also open the site in a new window by doing this:

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

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

    window.open(selectedVal)
}

As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.

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

回答by George Cummins

First, change the option values to the URL you want to target:

首先,将选项值更改为您要定位的 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>

Next, add an ID to the select so you can target it:

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

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

Finally, add an onclick method to the select control to handle the redirect:

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

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

回答by Jivings

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

回答by James Allardice

Using JavaScript, you can attach an onclickevent to the button. In the event handler, you can use an ifstatement to check which value was selected in the selectlist, and use window.locationto redirect the user to the appropriate URL.

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

I would suggest changing the valueof the optionelements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.

我会建议改变value了的option元素是需要的URL,然后你可以简单地抓住价值,去那个网址,而不必检查被选择的选项。

回答by Pratish

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