<select> 下拉选项中的链接

IT技术 javascript html select drop-down-menu
2021-03-16 00:12:33

在不需要外部按钮的情况下,每个下拉选项是否可以在选择时链接到某处?

<select>
  <option value="x">x</option>
  <option value="y">y</option>
</select>
6个回答

您可以使用 onChange 属性。就像是:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>
确实是onChange;onValueChanged 不是 javascript
2021-04-16 00:12:33

添加 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>

...或者如果您希望/需要保持您的选项“值”不变,只需添加一个新属性:

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

也许这会有所帮助:

<select onchange="location = this.value;">
 <option value="home.html">Home</option>
 <option value="contact.html">Contact</option>
 <option value="about.html">About</option>
</select>

这是一个老问题,我知道但对于 2019 年的窥视:

像上面一样,如果您只想更改 URL,您可以这样做:

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

但是如果你想让它像一个标签一样,那么你可以这样做"./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>
如果我也想在带有一些 rel="" 的新选项卡(如 target="_blank")中打开链接怎么办?
2021-04-30 00:12:33