The Select Elements - Page 17

Although they look quite different, the drop-down list and the list boxes are actually both elements created with the <SELECT> tag, and strictly speaking they are both select elements. The select element has one or more options in a list that you can select from; each of these options is defined using the <OPTION> tag. Your list of <OPTION> tags goes in between the <SELECT> and </SELECT> tags.

The SIZE attribute of the <SELECT> tag is used to specify how many of the options are visible to the user.

For example, to create a list box that is 5 rows deep and populate it with 7 options, our <SELECT> tag would look like this:

<SELECT NAME=theDay SIZE=5>
  <OPTION VALUE=0 SELECTED>Monday
  <OPTION VALUE=1>Tuesday
  <OPTION VALUE=2>Wednesday
  <OPTION VALUE=3>Thursday
  <OPTION VALUE=4>Friday
  <OPTION VALUE=5>Saturday
  <OPTION VALUE=6>Sunday
</SELECT>

Notice that the Monday <OPTION> tag also contains the word SELECTED; this will make this option the default selected one when the page is loaded. The values of the options have been defined as numbers, but text would be equally valid.

If we wanted this to be a drop-down list, then we just need to change the SIZE attribute in the <SELECT> tag to 1 and hey presto it's a drop-down list.

If we want to let the user choose more than one item from a list at once, we simply need add the MULTIPLE attribute to the <SELECT> definition.

The <SELECT> tag creates a Select object. This object has an options[] array property, and this array is made up of Option objects, one for each <OPTION> element inside the <SELECT> element associated with the Select object. For example, in the above example if the <SELECT> element was contained in a form called theForm, with

document.theForm.theDay.options[0]

we would access the option created for Monday.

How can we tell which option has been selected by the user? Easy; we use the Select object's selectedIndex property. We can use the index value returned by this property to access the selected option using the options[] array.

The Option object also has index, text, and value properties. The index property returns the index position of that option in the options[] array. The text property is what's displayed in the list and the value property is the value defined for the option, which would be posted to the server if the form were submitted.

If you want to find out how many options there are in a select element, you can use the length property of either the Select object itself or of its options[] array property.

Let's see how we could loop through the options[] array for the above select box:

var theDayElement = window.document.form1.theDay;
document.write("There are " + theDayElement.length +
 "options");
var optionCounter;
for (optionCounter = 0; optionCounter < theDayElement.length;
 optionCounter++)
{
   document.write("Option text is " +
    theDayElement.options[optionCounter].text)
   document.write(" and its value is ");
   document.write(theDayElement.options[optionCounter].value);
   document.write("")
}

[The colored lines above are one line. They have been split for formatting purposes.]

First we set the variable theDayElement to reference the Select object. Then we write the number of options to the page, in this case 7.

Next we use a for loop to loop through the options[] array, displaying the text of each option, such as Monday, Tuesday etc., and its value, such as 0, 1 etc. If you create a page based on this code, it must be placed after the <SELECT> tag has been defined.

It's also possible to add options to a select element after the page has finished loading. We'll look at how this is done next.

How It Works (Con't) - Page 16
Beginning JavaScript
Adding New Options - Page 18