Creating a drop-down list that links to other pages

You've seen them.  All the big Web sites have them.  Now you want one, too.  Perhaps you have localized sites and you want a cover page with a drop-down that lists the different languages into which your Web site is translated so that visitors can select the language they want to view.  Maybe you want to use a drop-down for navigation for your site or to allow site visitors to access online search engines.  There could be any number of reasons why you want to do it.  Or maybe there's no reason at all.  You just want to know how to do it because you think it looks cool.

There are two types of drop-down lists that hyperlink to other pages:  one, the page changes when the selection changes; two, the page changes when the visitor clicks a button.  I'm going to give you JavaScript code to do both of these, but there is of course, one limitation.  As always, if the user has JavaScript disabled, then the simple examples that I provide here won't work.  In this case, you could use ASP, ASP.NET, or another server-side processing technology to provide this functionality.

Page changes when the selection changes

Creating a dropdown that causes a new page to open when the selection changes is fairly simple to do.  The user doesn't have to do anything except select the item from the drop-down and the page opens.  I used the open method, but you could also use the navigate method.

Here's the script:

 <script>
 function goToPage(url)
 {
 if (url != "")
 {
 .open(url);
 }
 }
</script>

And here's the dropdown.  Note that the form tag is necessary for the script to function properly.

 <form>
 <label><u>S</u>earch Engines</label>
 <select accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)">
 <option selected>Please select one</option>
 <option value="http://search.msn.com/">MSN Search</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 </select>
form>

Page changes when the user click a button

Creating a dropdown that uses a Go button is just as simple. When the user has selected the item they want from the dropdown, they just click Go, and the new page opens. I used the open method for this script also, but you could use the navigate method here as well.

Here's the script:

 <script>
function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }
</script>

And here's the dropdown. Note that the form tag is necessary for the script to function properly.

 <form name="dropdown">
 <label>Search <u>E</u>ngines</label>
 <select name="list" accesskey="E">
 <option selected>Please select one</option>
 <option value="http://search.msn.com/">MSN Search</option>
 <option value="http://www.google.com/">Google</option>
 <option value="http://www.search.com/">Search.com</option>
 <option value="http://www.dogpile.com/">Dogpile</option>
 <select>
 <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
</form>

In order to use this code, all you need to do is copy the code above, switch to Code view in FrontPage, and paste it into your page.  Once you do this, change text displayed and the value attribute for each option in the SELECT element.  The value attributes should contain a valid URL including the "http://".  Place the script code in the HEAD section of your page, and place the form with the SELECT element anywhere on the page where you want it to appear.  You can have more than one form on a page.  Just don't nest this FORM element inside of another FORM element.  If you do so, you will likely experience problems.

What's the difference?

The only differences between the two examples above are the location of the event that calls the script (which in the first is in the onchange event for the SELECT element, and in the second is in the onclick event for the Go button) and the way the SELECT element is accessed (which for the first example is accessed by using the this keyword, and for the second is accessed using the name attributes for the FORM and SELECT elements).