The SELECT Element

Selection lists in HTML FORMS appear as drop-down menus or scrollable lists of selectable items. Lists are built using two: <SELECT> and <OPTION>. for instance, the following code:

<SELECT NAME="test">
     <OPTION>1
     <OPTION>2
     <OPTION SELECTED>3
</SELECT>

creates a three-item, drop-down menu with the choices 1, 2, and 3. Using the SIZE attribute you can create a scrollable list with the number of elements visible at one time indicated by the value of SIZE attribute. To turn your drop-down menu into a scrollable menu with two visible items you could use the following:

<SELECT NAME="test" SIZE="2">
     <OPTION>1
     <OPTION SELECTED>2
     <OPTION>3
</SELECT>

In both of these examples, the user can make only one choice. Using the MULTIPLE attribute, you can enable the user to select more than one choice in a scrollable selection list:

<SELECT NAME="test" SIZE="2" MULTIPLE>
     <OPTION VALUE="Number One">1
     <OPTION VALUE="The Second">2
     <OPTION VALUE="Three is It" SELECTED>3
</SELECT>

The <OPTION> tag consists of two "value" parts: 1) "value" & 2) "text"

  • test.options[1].value equals "The Second"
  • test.options[2].text equals 3

Selection lists are accessible in JavaScript through the <SELECT> Object. This object bears some similarity to both the buttons as well the radio buttons.

Properties

PROPERTY DESCRIPTION
defaultSelected indicates whether the option is selected by default in the <OPTION> tag
length a read-only integer that specifies the number of elements in the options[ ] array (ie, the number of options that appear in the <SELECT> element)
options an array of <OPTION> objects, each of which describes one of the options displayed within the Select element
selectedIndex an integer that specifies the index of the selected option within the <SELECT> element. If the <SELECT> element has its MULTIPLE attribute set and allows multiple selections, this property only specifies the index of the first selected item or –1 if none are selected
type a read-only string that specifies the type of this form element. For <SELECT> elements, it has the value "select-one" or "select-multiple".

As with radio buttons, the list of options is maintained as an Array with indexes starting at zero. In this case, the array is a property of the <SELECT> Object is called options.

Both selection option and the individual option elements have properties. In addition to the options array, the select object has the selectedIndex property, which contains the index number of the currently selected option.

Each option in a s selection list also has several properties. defaultSelected indicates whether the option is selected by default in the <OPTION> tag. The index property contains the index value of the current option in the options[] array. Again, as you might expect, selected indicates the current status of the option, text contains the value of the text displayed in the menu for the specific option, and value contains any value indicated in the <OPTION> tag.

The <SELECT> Object has no available methods. However, the <SELECT> Object has an Event Handler - onChange.

For example, if you have the following selection list:

<SELECT NAME="example" onChange="react(this);">
     <OPTION VALUE="Number One">1
     <OPTION VALUE="The Second">2
     <OPTION VALUE="Three is It" SELECTED>3
</SELECT>

then when the list is first displayed, you have would have access to the following information:

  • example.options[1].value == "The Second"
  • example.options[2].text == "3"
  • example.options[1].defaultSelected == false

Select an option and see what happens

Take a quick Self-test.