<select>下拉选项中的链接

Question

每当选择下拉选项时，是否可能无需外部按钮即可将其链接到某个地方？

<select>
  <option value="x">x</option>
  <option value="y">y</option>
</select>

- Sebastian

---

是的，但你需要使用JavaScript来完成。我会为你创建一个Fiddle。敬请关注！ - VVV

像这个 http://jsfiddle.net/j08691/X8WUG/ 一样吗？ - j08691

@j08691，你本可以回答它而不是留下评论。 - The Alpha

可能是在<option>标签内使用href链接的重复问题。 - gingerbreadboy

重复的问题：https://dev59.com/snI-5IYBdhLWcg3wI0t9#2000689 - gingerbreadboy

Answer 1

您可以使用onChange属性，例如：

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

- Kevin

---

确实是onChange；onValueChanged不是JavaScript。 - Kevin

Answer 2

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

- epascarello

Answer 3

如果您想/需要保留选项的“value”值不变，只需添加一个新属性：

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

- Mark

Answer 4

也许这可以帮助你：

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

- Zub

Answer 5

我知道这是一个老问题，但对于2019年的人们：

如果您只想更改URL，则可以执行以下操作：

将原始答案翻译成“最初的回答”。

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

但如果你想让它像一个a标签一样工作，这样你就可以使用"./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>

- GoodClover

---

如果我想在新标签页中打开链接（例如target="_blank"）并带有一些rel=""，该怎么办？ - NDi

Answer 6

扩展@kevin的答案，如果有人需要在URL很重要时执行一些确认逻辑。

<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
    <option selected disabled>Action</option>    
    <option value="/user/view">View</option>    
    <option value="/user/edit">Edit</option>    
    <option value="/user/delete">Delete</option>
</select>

- laxit

Answer 7

你可以使用以下代码：

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

- Tanmoy Biswas

---

为什么这个被踩了？改变URL以获取所需地址太难了吗？ - Adrian Grygutis