The thing that makes select objects strange is that the whole select is named, but none of the select's options is. For example, the HTML for the first select looks like this:

<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
<option>gorilla
<option>orangutan
</select>

Notice that the whole select is named pulldown_1, but the individual options aren't named. This makes it difficult to access individual options.

Luckily, through the magic of arrays and objects, there's a way to access and change the options of a select. If you wanted to change the second option of the pulldown menu, you'd type:

window.document.form_1.pulldown_1.options[1].text = 'new_text';

This works because the select element has an options property that is an array of all the select's options. You can grab one of the options in the array and change its text property. Try it — change the select and then scroll up to see that the pulldown menu actually changed. The second option in the pulldown select should now be *thau*.

In addition to the options property, selects have a property called selectedIndex. When one option in a select has been chosen, the selectedIndex property of the select will be the array number of the selected option. To test this, select one of the options in the list select (the second one) and then check the index. Remember that the first option in the array is option 0. The line I used to check this was:

<a href="#" onClick=
"alert('index is: ' + window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>

The form is named form_1, the list select is named list_1. To get the selectedIndex, I looked at window.document.form_1.list_1.selectedIndex. If you want, you can set the selectedIndex like this ...

window.document.form_1.list_1.selectedIndex = 1;

Once you know the index number of the selected option, you can find out what it is:

var the_select = window.document.form_1.list_1;
var the_index = the_select.selectedIndex;
var the_selected = the_select.options[the_index].text;

The selectedIndex property is great when you only have one option selected. What happens when you have more than one option selected? Well, that gets slightly stranger. If you want to know, here's some information about multiple selects.

Just like the other form elements, the select element has a handler: onChange(). This handler gets called whenever there's a change to the select. Here's the example from Lesson 1 to show you how onChange works with a select.