Select a Page Tutorials Home Builder.com

The Options Array and SelectedIndex Property
In this example, we are using parallel arrays to power an HTML select menu for navigation. The simple HTML form 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>

The first array, named "sites", is constructed as a dense array, where you skip the assignment coding and simply store comma separated values, in this case URLs, as array constructor parameters. It stores the URLs that the select menu uses for its navigation. Notice that the first element is an empty string. This is because in the HTML menu, the first option is used as directions to the user rather than a place for them to navigate.

var sites = new Array("","../default.php","http://builder.cnet.com")

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. If we needed to construct the path to the array's elements, it would look like this:

document.billy.bob.options[1] // path to the 2nd option in the menu

Or, since each form element is considered a built-in array as part of the document object model, as are forms themselves, the syntax could also be: (Assuming the first form on the page has a select menu as its first element)

document.forms[0].elements[0].options[1]

If we needed to access the options' value or text properties, we would need to construct the path to the options array like this:
alert(document.billy.bob.options[1].text)

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 index position of the options array element that corresponds to the HTML option chosen by the user.

document.billy.bob.selectedIndex

Some new scripters get confused by this property, and understandably so, because the selectedIndex property belongs to the select object, but represents an index of the options array. It may help to think of the above statement in this way instead:

document.billy.bob.options[document.billy.bob.selectedIndex]

You'll see the above syntax again when we need to access the value or text property of an unknown option element.

Using the selectedIndex of the select menu, the example script simply sets the location.href string equal to the URL assuming the same position in the sites array. To make the code readable, we'll first store the value of the selectedIndex in a variable.

var selectedOption = document.billy.bob.selectedIndex
location.href = sites[selectedOption]

The onChange Event Handler

Select a Page 162 Class Site Builder.com

The script from the first example in its entirety is no different for this example. The only thing that has changed is the user interface. Previously, the function was called from within a form button, but here it is called using the onChange event handler located in the opening select tag. This small change means the user will go to the highlighted location immediately upon selection, rather than having to click a button to navigate to the chosen location.

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.

function goToURL2() {

var sites = new Array("","../default.php","http://builder.cnet.com")
var optionNumber = document.billy2.bob2.selectedIndex

    if (optionNumber != 0) { //the first option is used as directions holder
    location.href = urls[optionNumber]
   }

}

Then in the body, here is the form with the onChange handler:

<form name="billy2">

<select name="bob2" onChange="goToURL2()">
  <option>Select a Page</option>
  <option>Tutorials Home</option>
  <option>Builder.com</option>
</select>

</form>

The type of event handler used to invoke the function is a matter of preference.

View the Source