Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

Availability

JavaScript 1.0; enhanced in JavaScript
1.1

Inherits from/Overrides

Inherits from Input, HTMLElement

Synopsis

form.element_name
form.elements[i]

Properties

Select inherits properties from Input and HTMLElement and defines or
overrides the following:

length

A read-only integer that specifies the number of elements in the
options[] array. The value of this property is the
same as options.length.

options

An array of Option objects, each of which describes one of the
options displayed within the Select element. See the
Select.options[] reference page for details about this
array, including techniques for modifying the options displayed by
the Select object.

selectedIndex

An integer that specifies the
index of the selected option within
the Select object. If no option is selected,
selectedIndex is -1. If more than one option is
selected, selectedIndex specifies the index of the
first one only.

In JavaScript 1.0, selectedIndex is a read-only
property. In JavaScript 1.1, it is read/write. Setting the value of
this property selects the specified option and deselects all other
options, even if the Select object has the
multiple attribute specified. When you''re
doing list-box selection (instead of drop-down menu selection), you
can deselect all options by setting selectedIndex
to -1. Note that changing the selection in this way does not trigger
the onchange( ) event handler.

type [ JavaScript 1.1]

A read-only string property shared by all form elements; it specifies
the type of the element. The Select object is unusual in that there
are two possible values for the type property. If
the Select object allows only a single selection (i.e., if the
multiple attribute does not appear in the
object''s HTML definition), the value of the
type property is "select-one". If the
multiple attribute does appear, the value of the
type attribute is "select-multiple".
See also the Input.type reference page.

Methods

Select inherits the methods of Input and HTMLElement.

Event Handlers

Select inherits event handlers from Input and HTMLElement and defines
or overrides the following:

onchange

Invoked when the user selects or deselects an item.

HTML Syntax

A
Select element is created with a standard HTML
<select> tag. 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
>
<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 for the
user. 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 includes a scrollbar
so 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 JavaScript 1.1, 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 the Select.options[] and
Option reference pages for details.

Note that the Select object is a kind of Input object and inherits
from Input, despite the fact that Select objects are not created with
HTML <input> tags.

See Also

Form, HTMLElement, Input, Option; HTMLSelectElement in the DOM
reference section