Select box navigation

This script does not work in Explorer 3 on Mac.

This script is slightly buggy in Netscape 2: it requires the user to take the focus away from the select box by clicking somewhere else after he has selected his destination. This may be confusing.

A much needed script is the select box navigation. The user sees a select box as below, selects a destination and the new page is automatically loaded.

Try the box below, then return to this page.

You'll need to put the following HTML in the page:

<select name=navi onChange="go()">
<option value=''>--- Select your destination ---
<option value="js.html">General Introduction
<option value="placejs.html">Placing JavaScripts
<option value="links.html">JavaScript Links
</select>

First of all, put the correct links in the VALUE of the options.

Then add an onChange event handler. If the user changes the select box, this event handler calls the script go() which loads the new page.

This script is very simple:

function go()
{
	box = document.forms[0].navi;
	destination = box.options[box.selectedIndex].value;
	if (destination) location.href = destination;
}

First, I define a variable box, because I'm too lazy to type document.forms[0].navi twice in the next line.

Then I take the value of the option the user has selected and put it in destination. As we put the correct links in the VALUE of the options, the correct URL now ends up in destination.
For a further explanantion of this line of code, please see the Introduction to forms page.

Then I check if destination exists. The reason for this is, that the first option (the purely ornamental --- Select your destination ---) has no value. If the user selects the first option, nothing should happen.

If everything is OK, we load the correct URL into location.href and the page is loaded.

If you want to load a page into another frame, you'll need to go to the correct frame first, as explained in the Introduction to frames.