[Chapter 21] Reference: Select
Author: David Flanagan
Date: Fri Aug 29 11:19:32 1997

#

| Chapter 21 JavaScript Reference |

# Select Element

## Name

Select Element---a graphical selection list

## Availability

Navigator 2.0, Internet Explorer 3.0; enhanced in Navigator 3.0

## Synopsis

    form.element_name
    form.elements[i]

## 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"

scroll() |  | Select.blur()