Select a Page Tutorials Home Builder.com

This very simplified script can get confusing if you don't understand the selectedIndex property in relation to the options array. The golden rule when working with the selectedIndex property is: the selectedIndex property belongs to the select object, but represents an index of the options array.

When all your script needs to know about an option is its index position in the options array, the simple, "document.formName.selectName.selectedIndex" reference is sufficient. The options array only requires syntactical reference when a property of an option object needs to be accessed.

The two properties of the option object most often referenced are value and text. Text represents the actual HTML text the user sees as an option in a menu. Value is the HTML attribute that is hidden to the user, and used by both CGI and JavaScript scripts. A very simplified version of a menu-powering script requires the use of either of these properties, in this case the value property, so a literal reference to the options array is required.

document.billy.bob.options[1].value
document.billy.bob.options[1].text

To simplify and shorten the script, we'll store the URLs corresponding to each option inside the form, in the HTML value attribute of each option tag. This cuts out the need for the sites array, saving several lines of JavaScript code. So now the HTML form looks like this:

<form name="billy">

<select name="bob"">
  <option>Select a Page</option>
  <option value="../default.php">Tutorials Home</option>
  <option value="http://builder.cnet.com">Builder.com</option>
</select>

<input type="button" onClick="goToURL()" value="GO!">

</form>

Now our script needs to reference the options array in order to access the value property. Since the selectedIndex of the options array is unknown, we'll need to use the path to the selectedIndex property as the options array index:

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

Weeding out the first option and setting the location equal to the selected option's value is all there is to the simplified script:

if(document.billy.bob.selectedIndex != 0){
location.href = document.billy.bob.options[document.billy.bob.selectedIndex].value
}

You could even construct the menu to contain all the JavaScript it needs to power itself:

<form name="billy">

<select name="bob"">
  <option value="../default.php">Tutorials Home</option>
  <option value="http://builder.cnet.com">Builder.com</option>
</select>

<input type="button" value="GO!" onClick="location.href=document.billy.bob.options[document.billy.bob.selectedIndex].value">

</form>

View the Source