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.

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.

• javascript
• html

Share Follow asked Jan 30, 2013 at 5:45 MatthewMatthew 9322 silver badges66 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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/5n5ZE/

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

 });

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

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>

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>

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>