CODEWITHSUNDEEP
javascripthtmlselectdrop-down-menu
Sebastian
Sebastian

Reputation: 3626

Links in <select> dropdown options

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>

Upvotes: 40

Views: 188604

Answers (7)

laxit
laxit

Reputation: 18

Extending on @kevin's answer, if someone has to perform some confirmation logic if URL is critical.

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

Upvotes: 0

GoodClover
GoodClover

Reputation: 126

This is an old question, I know but for 2019 peeps:

Like above if you just want to change the URL you can do this:

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

<select onChange="window.location.redirect(this.value)">
    <option value="..">back</option>
    <option value="./list">list</option>
    <option value="#bottom">bottom</option>
</select>

Upvotes: 2

Zub
Zub

Reputation: 828

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>

Upvotes: 4

Tanmoy Biswas
Tanmoy Biswas

Reputation: 21

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>

Upvotes: -3

Kevin
Kevin

Reputation: 1706

You can use the onChange property. Something like:

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

Upvotes: 94

Mark
Mark

Reputation: 6093

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

Upvotes: 9

epascarello
epascarello

Reputation: 207557

Add an onchange event handler and set the pages location to the value

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

Upvotes: 40

Related Questions