25.253. Select: a graphical selection listDOM Level 2 HTML: Node |
Property | Attribute | Description |
---|---|---|
boolean disabled | disabled | Whether the user element is disabled |
boolean multiple | multiple | Whether more than one option may be selected |
String name | name | Element name for form submission |
long size | size | The number of options to display at once |
long tabIndex | tabindex | Position of Select element in the tabbing order |
add( )
Inserts a new Option object into the options array, either by appending it at the end of the array or by inserting it before another specified option.
blur( )
Takes keyboard focus away from this element.
focus( )
Transfers keyboard focus to this element.
remove( )
Removes the <option> element at the specified position.
onchange
Invoked when the user selects or deselects an item.
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>
The Select element represents an HTML <select> tag, which displays a graphical list of choices to 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 behaviorselecting 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 that is size lines high in the browser window. If size is smaller than the number of options, the listbox 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 Option for details.
For a Select element without the multiple attribute specified, you can determine which option is selected with the selectedIndex property. When multiple selections are allowed, however, this property tells you the index of only the first selected option. To determine the full set of selected options, you must iterate through the options[] array and check the selected property of each Option object.
The options displayed by the Select element may be dynamically modified. Add a new option with the add( ) method and the Option( ) constructor; remove an option with the remove( ) method. Changes are also possible by direct manipulation of the options array.
Form, Option, Select.options[]; Chapter 18