In this example, we are using parallel arrays to power an HTML select menu for navigation. The simple HTML menu and its code is as follows:
<form name="billy">
<select name="bob">
<option>Select a Page</option>
<option>Tutorials Home</option>
<option>Builder.com</option>
</select>
<input type="button" onClick="goToURL()" value="GO!">
</form>
Construct A URL Array
The first array, named "sites", is constructed as a
dense array. This array is used to store the URLs associated to each option. There is no physical connection between the form and this array yet. The first element of this array is an empty string ("") because the HTML menu's first option is used for directions rather than a true option.
var sites = new Array("","http://jennifermadden.com/162/","http://builder.cnet.com")
Built-In Array for HTML Menus
The second array does not require any construction, it is the built-in array of an HTML select menu's options. As long as a select menu exists on a page, there is a corresponding JavaScript array built for it. You only need to follow the path to the option array's individual elements as needed:
document.billy.bob.options[1]
Accessing the Value or Text Property
When access an option's value or text property is needed, just include that property in the path:
document.billy.bob.options[1].text
Simplifying the Options Array Notation with selectedIndex
But since all we need is the index position of the chosen option, we can bypass any options array notation and use the
selectedIndex property of the select object to retrieve that value. We have direct access to the chosen option (an unknown) via the selectedIndex property of the select object. The selectedIndex property returns the selected option.
document.billy.bob.selectedIndex
Huh?
Some new scripters get confused by this property, and understandably so, because the selectedIndex property belongs to the select object (therefore will be physically attached to it in syntax), but represents an option. It may help to think of the above statement in this way instead:
document.billy.bob.options[document.billy.bob.selectedIndex]
Putting It All Together
Using selectedIndex, the example script sets the location.href string equal to the URL assuming the same position in the sites array. So if the 2nd option is selected, location.href is set to the 2nd element in the site's array. To make the code readable, we'll first store the value of the selectedIndex in a variable. The entire script is contained in a function so that it may be invoked at a specific time.
function goToURL() {
var sites = new Array("","http://jennifermadden.com/162/","http://builder.cnet.com")
var optionNumber = document.billy.bob.selectedIndex
if (optionNumber != 0) { //the first option is used as directions holder
location.href = sites[optionNumber]
}
}
Invoking via onChange or onClick
The sample form below does the exact same thing as the first form, but without the user having to click the "GO!" button. The first form contains a button which invokes the function using the onClick event handler (see form example above). The second form invokes the function using the
onChange event handler which is located in the opening select tag.
<form name="billy">
<select name="bob" onChange="goToURL()">
<option>Select a Page</option>
<option>Tutorials Home</option>
<option>Builder.com</option>
</select>
</form>
Warning!
Since the onChange event handler is triggered only when the selectedIndex is changed from the current option to any other option, it is vital to include user directions as the initial chosen option. Otherwise the initial selected option cannot be selected.
The type of event handler used to invoke the function is a matter of preference.
