Lesson 16-Advanced Forms: Selection lists II

We will now proceed to learn how we can have scripts automatically update itself whenever a different selection is made by the user, and see some practical uses of this. In this section, thou shaw see:

• Properties of the options array itself

• Example: Creating "combo link boxes"

• Creating link boxes that jump to a url upon selecting

Properties of the options array itself

The keyword here is "itself". In the last lesson, we looked at properties of elements of the options array, NOT the options array itself.

Just to refresh our minds, here are the properties we looked at last section:

We will now look at properties of the options array itself:

Using the above table, to use the properties, we would do the following:

document.formname.selectionname.options.property

Lets see this in action:

<form name="George">
<p><select name="example" size="1">
<option value="1">choice1</option>
<option value="2">choice2</option>
<option value="3">choice3</option>
</select></p>
</form>

Using the length property, we can see how many elements are in the selection list:

alert(document.George.example.options.length)

As you can see, it alerts "3", since there are three elements in the list.

The selectedIndex property informs the index number of the element selected, and updates itself whenever a new selection is made.

For example:

Make a selection:

The selectedIndex property updates itself if you change elements, so if you had selected "choice1", it alerts "0" (since array indexes start at 0), if you than changed and selected "choice2", it will alert "1" instead. The example above may not seem like much, but it paves the way for many useful scripts.

Example: Creating "combo link boxes"

A common use of the above knowledge is to create a combo link box, where the selection list acts as a url jumper. Here's an example:

Before we plunge right in, lets first put together all our ideas we've learned in Lesson15 and 16. Recall from Lesson 15, that to access the individual elements, we would write:

document.George.example.options[x]

where "x" is the index number of the element.

Also recall from what we've just mentioned, that the selectedIndex property of the options array returns the index of the element that's currently selected:

document.George2.example.options.selectedIndex

Now, with the above two pieces of code, we are all set to make our combo box script!

<form name="George">
<p><select name="example" size="1">
<option value="http://www.cnet.com">choice1</option>
<option value="http://www.cnn.com">choice2</option>
<option value="http://www.geocities.com">choice3</option>
</select></p>

<script language="javascript">
<!--
function go()
{
location=
document.George.example.options[document.George.example.selectedIndex].value
}
//-->
</script>

<input type="button" name="test" value="Go!" onClick="go()">
</form>

Pay close attention to how we put together the two pieces of code mentioned earlier:

location=
document.George.example.options[document.George.example.selectedIndex].value

See, the part in red, the script that returns the index of the element selected, is put inside the script that returns the value of that particular element. Now, since the "red" script is a self updating script that automatically changes index numbers whenever a user selects another element, the "blue" script will in turn always get the value (url) of the element the user has selected.

Creating link boxes that jump to a url upon selecting

Ok, we now have a good understanding of how a combo link box operates. Often times on the web, however, we see combo link boxes that jump to an url upon selecting, like below:   

A user doesn't have to press the "Go!" button after making a selection to warp to the desired destination. The trick here is the onChange event handler, which reacts to the surfer changing the selection inside the combo box. The onChange event handler is inserted inside the select tag. Let's modify our old combo box so it jumps to a url this way. The revision is highlighted in red:

<form name="George">
<p><select name="example" size="1" onChange="go()">
<option value="http://www.cnet.com">choice1</option>
<option value="http://www.cnn.com">choice2</option>
<option value="http://www.geocities.com">choice3</option>
</select></p>

<script language="javascript">
<!--
function go()
{
location=
document.George.example.options[document.George.example.selectedIndex].value
}
//-->
</script>

<input type="button" name="test" value="Go!" onClick="go()">
</form>

As you can see, all we really did here is add a onChange event to the select tag, which causes function go() to react as soon as the selection in the combo link box changes.  Now, we still need the "Go!" button in this case. The onChange event handler only reacts if the selection has changed. If the user wants to go to the currently selected element, the"Go!" button has to be pressed.

Lesson 17