Introduction
We've all seen sites that feature drop down lists that automatically take you to your selection without you needing to make the cumbersome and lengthy step of hitting a "Go" button. If you've ever wondered how they do this then as you probably expected it's very simple.
What on Earth am I talking about?
Picture a drop down list as follows:
We often see a button next to the list that the user should press in order to actually activate there selection:
The user selects the value from the dropdown, hits Go, and the choice is made. By using javascript we can have the list notify us when a change is made, and we can essentially hit that Go button for the user. Not only do we save the use all the hassle of clicking on a button, we also get a handy reduction in the amount of screen real estate used.
How do we do it?
A typical dropdown list is instantiated using the following:
<select name=select1>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
(Give or take some attributes). What we do is add an attribute that instructs the page to call our handler for when the list selection is changed.
<select name=select1 onchange='OnChange(this.form.select1);'>
Our handler will look up the value that has just been selected, and navigate to an appropriate URL. An example of this is shown below:
<SCRIPT LANGUAGE="javascript">
<!--
function OnChange(dropdown)
{
var myindex = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
var baseURL = <Some value based on SelValue>
top.location.href = baseURL;
return true;
}
</SCRIPT>
What if the user isn't using JavaScript?
We use the <noscript> tag to help us. We provide a Go button for the list, but only show it if JavaScript is not present:
<select name=select1>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select><noscript><INPUT type="submit" value="Go" name=submit1></noscript>
