Availability

Navigator 2.0, Internet Explorer 3.0; enhanced in Navigator 3.0

Properties

form

A read-only reference to the Form object that contains the Select element.

length

A read-only integer that specifies the number of elements in the options[] array (i.e., the number of options that appear in the Select element).

name

A read-only string, set by the HTML NAME attribute, that specifies the name of the Select element. This is also the name that can be used to reference the Select element as a property of its form.

options

An array of Option objects, each of which describes one of the options displayed within the Select element.

selectedIndex

A read-only (read/write in Navigator 3.0) 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, then 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". Available in Navigator 3.0 and later.

Methods

blur()

Removes keyboard focus from the Select element.

click()

Simulates a click on Select element.

focus()

Gives keyboard focus to the Select element.

Event Handlers

onblur()

Invoked when the Select element loses keyboard focus.

onchange()

Invoked when the user selects or deselects an item.

onfocus()

Invoked when the Select element is given keyboard focus.

HTML Syntax

A Select element is created with a standard HTML <SELECT> tag, with the addition of the new onChange event-handler attribute. Options to appear within the Select element are created with the <OPTION> tag:

<FORM>
    ...
<SELECT
    NAME="name"   a name that identifies this element; specifies name property
    [ SIZE=integer ]  number of visible options in Select element
    [ MULTIPLE ]    multiple options may be selected, if present
    [ onChange="handler" ]    invoked when the selection changes
    [ onBlur="handler" ]  invoked when element loses focus
    [ onFocus="handler" ] invoked when element gains focus
>
<OPTION VALUE="value1" [SELECTED]> option_label1
<OPTION VALUE="value2" [SELECTED]> option_label2
    .
    .   other options here
    .
</SELECT>
   ...
</FORM>

Description

The Select element represents a graphical list of choices from which the user may select. If the MULTIPLE attribute is present in the HTML definition of the element, the user may select any number of options from the list. If that attribute is not present, the user may select only one option, and options have a "radio button" behavior--selecting one deselects whichever was previously selected.

The options in a Select element may be displayed in two distinct ways. If the SIZE attribute has a value greater than 1, or if the MULTIPLE attribute is present, they are displayed in a list box which is SIZE lines high in the browser window. If SIZE is smaller than the number of options, the list box will include a scrollbar so that all the options are accessible. On the other hand, if SIZE is specified as 1, and MULTIPLE is not specified, the currently selected option is displayed on a single line and the list of other options is made available through a drop-down menu. The first presentation style displays the options clearly but requires more space in the browser window. The second style requires minimal space, but does not display alternative options as explicitly.

The options[] property of the Select element is the most interesting. This is the array of Option objects that describe the choices presented by the Select element. The length property specifies the length of this array (as does options.length). See the documentation of the Option object for details.

In Navigator 3.0, the options displayed by the Select element may be dynamically modified. You can change the text displayed by an Option object simply by setting its text property. You can change the number of options displayed by the Select element by setting the options.length property. And you can create new options for display with the Option() constructor function. See Select.options[] and Option for details.

See Also

"Element", "Form", "Option"