Using JavaScript to handle drop-down list selections

• Download source files - 1 Kb

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>