CODEWITHSUNDEEP
javascripthtml
Matthew
Matthew

Reputation: 93

How to redirect user when clicking an option in a select list?

I'm kicking my self for not being able to do this. But I've tried almost everything. I simply want to redirect a user to a specific page when they click an option in my option value list. Here's my current code (which should explain my question better):

<select name="test_redirect">
<option value="1" onclick="document.location = 'http://localhost/shop?item=1';">Item 1</option>
<option value="2" onclick="document.location = 'http://localhost/shop?item=2';">Item 2</option>
<option value="3" onclick="document.location = 'http://localhost/shop?item=3';">Item 3</option>
</select>

I've also tried onChange as well. Same result. Can some one please help me with this? Thank you guys.

Upvotes: 1

Views: 4697

Answers (6)

zdesam
zdesam

Reputation: 2976

try this

<select name="test_redirect" onchange="location.href='http://localhost/shop?item='+this.value">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

Upvotes: 0

syrkull
syrkull

Reputation: 2344

This will save you lines : 

<select onchange="location = this.options[this.selectedIndex].value;">
<option value="1">Item  1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

Upvotes: 0

leepowers
leepowers

Reputation: 38298

You need to bind the event handler to the <select> and not the individual options:

<select name="test_redirect" onchange="location.assign('http://localhost/shop?item=' + this.options[this.selectedIndex].value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

Upvotes: 0

Shurmajee
Shurmajee

Reputation: 1047

try this (give the link of the page in value of each option)

<select name="test_redirect" onchange="window.location.href=this.form.test_redirect.options[this.form.test_redirect.selectedIndex].value">

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

document.querySelectorAll("[name=test_redirect]")[0].addEventListener('change',
   function () {
       window.location = "http://localhost/shop?item=" + this.value;
   });

This depends on a relatively new browser (with querySelectorAll and addEventListener), but the principle's the same. click doesn't get triggered on options, so you have to go with change on the <select>. Might as well consolidate the code a bit too.

http://jsfiddle.net/5n5ZE/

Upvotes: 4

Hary
Hary

Reputation: 5818

<select id="test_redirect">
<option value="1">Item  1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

javascript

var val = document.getElementById("test_redirect").value;
window.location.href = "http://localhost/shop?item=" + val;

jquery

$("#test_redirect").change(function(){

    var val = $(this).val();
    window.location.href = "http://localhost/shop?item=" + val;

 });

Upvotes: 1

Related Questions