Javascript <select> 下拉选项中的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12287672/
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
Links in <select> dropdown options
提问by Sebastian
Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
在不需要外部按钮的情况下，每个下拉选项是否可以在选择时链接到某处？
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
回答by Kevin
You can use the onChange property. Something like:
您可以使用 onChange 属性。就像是：
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
回答by epascarello
Add an onchange event handler and set the pages location to the value
添加 onchange 事件处理程序并将页面位置设置为值
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
回答by Mark
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
...或者如果您希望/需要保持您的选项“值”不变，只需添加一个新属性：
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
回答by Zub
Maybe this will help:
也许这会有所帮助：
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
回答by GoodClover
This is an old question, I know but for 2019 peeps:
这是一个老问题，我知道但对于 2019 年的窥视：
Like above if you just want to change the URL you can do this:
像上面一样，如果您只想更改 URL，您可以这样做：
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom"or "?a=567"use window.location.replace()
但是如果你想让它像一个标签一样，那么你可以这样做"./page"，"#bottom"或者"?a=567"使用window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
PS. Sorry if the formatting is weird I'm new at Stack Overflows syntax
附注。对不起，如果格式很奇怪我是 Stack Overflows 语法的新手
回答by Tanmoy Biswas
You can use this code:
您可以使用此代码：
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>
