Javascript to Redirect a Drop Down List (select)
Saturday, October 9, 2010 |
Posted by
Blogger Blogspot
|
0
You can redirect using an html select without having to place it in a form, or have the user press a button. The user only needs to change the value.
Check out the following code that you can copy and paste into an html file and take for a test drive:
<html>
<head>
<title>Drop Down List Redirect</title>
</head>
<body>
<select onchange="top.location.href = 'http://www.google.com/search?q='
+ this.options[ this.selectedIndex ].value" >
<option value="">None</option>
<option value="cute+dogs">Cute Dogs</option>
<option value="lasers+beams">Laser Beams</option>
<option value="kitty+cat">Kitty Cat</option>
</select>
</body>
</html>
Breaking down the javascript code into more understandable chunks gives:
// 'this' points to the select object after change the item in the drop down list.
var drop_down = this;
// drop_down.selectedIndex contains the position of the item that was selected from the drop down
var selected_index = drop_down.selectedIndex;
// drop_down.options contains all of html option elements inside the html select
// we need to go to .value to get the 'value="something"' written in the HTML
var selected_value = drop_down.options[ selected_index ].value;
// changing top.location.href redirects ( unless you only append #blah )
top.location.href = 'http://www.google.com/search?q=' + selected_value
I hope you guys find this helpful!
Cheers,
Joseph
Loading related posts...
Subscribe to:
Post Comments (Atom)
