Categories:

Properties of the options array itself

The keyword here is "itself". In the last page, 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:

Properties of the elements of the options array
properties description
text returns the actual text (name) of the element
value returns the value of the element

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

Properties of the options array itself
properties description
length tells us the number of elements within this selection list
selectedIndex tells us the index number of the selected option

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: 

onClick="alert(document.George.example.options.selectedIndex)"

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.