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>
Chris Maunder is the co-founder of
CodeProject and
ContentLab.com, and has been a prominent figure in the software development community for nearly 30 years. Hailing from Australia, Chris has a background in Mathematics, Astrophysics, Environmental Engineering and Defence Research. His programming endeavours span everything from FORTRAN on Super Computers, C++/MFC on Windows, through to to high-load .NET web applications and Python AI applications on everything from macOS to a Raspberry Pi. Chris is a full-stack developer who is as comfortable with SQL as he is with CSS.
In the late 1990s, he and his business partner David Cunningham recognized the need for a platform that would facilitate knowledge-sharing among developers, leading to the establishment of CodeProject.com in 1999. Chris's expertise in programming and his passion for fostering a collaborative environment have played a pivotal role in the success of CodeProject.com. Over the years, the website has grown into a vibrant community where programmers worldwide can connect, exchange ideas, and find solutions to coding challenges. Chris is a prolific contributor to the developer community through his articles and tutorials, and his latest passion project,
CodeProject.AI.
In addition to his work with CodeProject.com, Chris co-founded ContentLab and DeveloperMedia, two projects focussed on helping companies make their Software Projects a success. Chris's roles included Product Development, Content Creation, Client Satisfaction and Systems Automation.