The <SELECT> Element <SELECT> elements enable you to display lists of items, as well as drop-down lists of items from which the user can select. You can handle selections in this control, change the displayed items, and more, all under programmatic control. The items displayed in a select control are specified with <OPTION> elements, like this: <SELECT NAME="select1" ONCHANGE="reportSelection()"> <OPTION>Option 1 <OPTION>Option 2 <OPTION>Option 3 <OPTION>Option 4 <OPTION>Option 5 </SELECT> Those <OPTION> elements are accessible from your code using the options collection, stored in the options property of a <SELECT> control. To use select controls, we have to be able to deal with <SELECT> elements, the options collection, and <OPTION> elements. You can see an overview of the <SELECT> element's properties, methods, and events in Table 13.9, its properties in depth in Table 13.10, its methods in depth in Table 13.11, and its events in depth in Table 13.12. Also see Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that apply to this element. You can see an overview of the options collection's properties and methods events in Table 13.13, its properties in depth in Table 13.14, and its methods in depth in Table 13.15. Finally, you can see the <OPTION> element's properties in Table 13.16. Also see Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that apply to this element. Table 13.9. Overview of the Properties, Methods, and Events of the <SELECT> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) Properties | Methods | Events | form | add | onafterupdate | length | remove | onbeforeupdate | multiple | item | onchange | name | namedItem | onerrorupdate | options | | | selectedIndex | | | size | | | type | | | value | | | Table 13.10. The Properties of the <SELECT> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) Property | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | form | x | x | x | x | x | x | x | x | x | x | | Read-only | | Contains a reference to the control's form. This is handy if you pass a control to a function and need access to other controls in the same form. | length | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the number of <OPTION> elements in the control. Set to an integer. In NS3+ and IE4+, you can write to this property, but only to set it to its current value or less. (In which case, <OPTION> elements will disappear from the end of the list.) | multiple | x | x | x | x | x | x | x | x | x | x | | Read/write | | Indicates whether multiple selections are allowed, corresponding to the standalone MULTIPLE attribute. Set to true to allow multiple selections or false (the default) to disallow multiple selections. See "Using Select Controls" in this chapter. | name | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the name of the control, as used in code. May be changed in code, because it's read/write. Set to a name string. | options | x | x | x | x | x | x | x | x | x | x | | Read-only | | Holds a collection of the <OPTION> elements in the <SELECT> control. The options collection supports methods such as options[ n ].add() and options[ n ].remove() . See tables 13.13, 13.14, and 13.15 for more on the options collection. Also see "Using Select Controls" in this chapter for an example. | selectedIndex | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the currently selected item's index in the control as an integer (0-based). You use this property to determine which item is selected in single-selection select controls. | size | | | | x | | | x | x | x | x | | Read/write | | Specifies the number of lines of items visible, corresponding to the SIZE attribute. Set to an integer. If you don't set a value for the SIZE attribute, the result is a drop-down list control. See "Using Select Controls" in this chapter. | type | | x | x | x | | x | x | x | x | x | | Read-only | | Specifies the type of <SELECT> control as a string. Will hold "select-one" for single-selection <SELECT> controls and " select-multiple" for multiple selection <SELECT> controls (that is, those <SELECT> controls that include the standalone MULTIPLE HTML attribute). | value | | | | | x | | | x | x | x | | Read/write | | Holds the contents of the value property of the currently selected <OPTION> element in single-selection select controls. You can associate a value with each <OPTION> element to store data for that <OPTION> element. (For example, the value property can hold a patient ID while the <OPTION> element's text property can hold their name.) Set to a string. | Table 13.11. The Methods of the <SELECT> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) Method | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | add | | | | x | | | | | | | | Returns: Nothing | | Adds an item at a specific index to a <SELECT> control. | | Syntax: add( element , referenceElement ) , where element is the new <OPTION> element to add and referenceElement is the element to insert the new element before. To insert the new element at the end of the <SELECT> control, set the second parameter to null. See "Creating New Options in a <SELECT> Control" in this chapter for an example. | remove | | | | x | | | | | | | | Returns: Nothing | | Removes an item at a specific index in the <SELECT> control. | | Syntax: remove( n ) , where n is the index of the <OPTION> element to remove. See "Creating New Options in a <SELECT> Control" in this chapter for an example. | item | | | | x | | | | | | | | Returns: <OPTION> element | | Returns the <OPTION> element at a specific index in the <SELECT> element. | | Syntax: item( index ) , where index is a number. This is a recent Netscape-only method; I suggest using the options collection instead. | namedItem | | | | x | | | | | | | | Returns: <OPTION> element | | Returns the <OPTION> element with a specific ID. | | Syntax: item( ID ) , where ID is a string holding the <OPTION> element's ID. This is a recent Netscape-only method; I suggest using the options collection instead. | Table 13.12. The Events of the <SELECT> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) Event | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | onafterupdate | | | | | | | x | x | x | x | | Occurs in a data-bound object after updating the data in the data source. | onbeforeupdate | | | | | | | x | x | x | x | | Occurs in a data-bound object before updating the data in the data source. | onchange | x | x | x | x | x | x | x | x | x | x | | When a new selection is made in the <SELECT> control, this event occurs. It's the main event you use to handle selections in this control. See "Using Select Controls" for an example. | onerrorupdate | | | | | | | x | x | x | x | | Occurs in a data-bound object when an error happened while updating data in the data source. | Table 13.13. The Properties and Methods of the options Collection Properties | Methods | defaultSelected | add | index | remove | selected | | text | | value | | Table 13.14. The Properties of the options Collection Property | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | defaultSelected | | | | | | | | | | | | x | x | x | x | x | x | x | x | x | x | | Read-only | | This property is true for the item in the options collection that is selected by default when the enclosing <SELECT> control appears. Set to true or false. | | Syntax: options[ n ].defaultSelected . | index | x | x | x | x | x | x | x | x | x | x | | Read-only | | The index of an item in the options collection. (Because you must access items in this collection by index, however, this property doesn't seem very useful.) | | Syntax: options[ n ].index . | selected | x | x | x | x | x | x | x | x | x | x | | Read/write | | Indicates whether an item in the options collection is selected. You use this property to determine which options are selected in multiple-selection <SELECT> controls. | | Syntax: options[ n ].selected . | text | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the text (caption) of an item in the options collection. Set to a string. | | Syntax: options[ n ].text . | value | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the value of an <OPTION> element. You can associate a value with each <OPTION> element to store data for that <OPTION> element. (For example, the value property can hold a patient ID while the <OPTION> element's text property can hold their name.) Set to a string. | | Syntax: options[ n ].value . See "The <OPTGROUP> Element" for an example. | Table 13.15. The Methods of the options Collection Method | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | add | | | | | | | x | x | x | x | | Returns: Nothing | | Adds an new item to the options collection. | | Syntax: options.add( element [, index ]) , where element is the new <OPTION> element to add and index is the index at which to add the item. If you don't specify an index value, the item is added at the end of the list. See "Creating New Options in a <SELECT> Control" in this chapter for an example. | remove | | | | | | | x | x | x | x | | Returns: Nothing | | Removes an item from the options collection. | | Syntax: options.remove( n ) , where n is the index of the item to remove. See "Creating New Options in a <SELECT> Control" in this chapter for an example. | Table 13.16. The Properties of the <OPTION> Element (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.) Property | NS2 | NS3 | NS4 | NS6 | IE3a | IE3b | IE4 | IE5 | IE5.5 | IE6 | defaultSelected | | | | | | | | | | | | x | x | x | x | x | x | x | x | x | x | | Read-only | | This property is true if this <OPTION> element is selected by default in a <SELECT> control. Set to true or false. | form | x | x | x | x | x | x | x | x | x | x | | Read-only | | Contains a reference to the control's form. This is handy if you pass a control to a function and need access to other controls in the same form. | label | | | | x | | | | | | x | | Read-only | | Sets or gets a value that you can use to implement your own label functionality for the <OPTION> elementthere's no standard browser behavior here yet. Set to a text string. | selected | x | x | x | x | x | x | x | x | x | x | | Read/write | | This property is true if an <OPTION> element is selected, false otherwise . You can determine which items are selected in a multiple-select <SELECT> element using this property. | text | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the text (caption) for the <OPTION> element. Set to a text string. | value | x | x | x | x | x | x | x | x | x | x | | Read/write | | Holds the value of an <OPTION> element. You can associate a value with each <OPTION> element to store data for that <OPTION> element. (For example, the value property can hold a patient ID while the <OPTION> element's text property can hold their name.) Set to a string. | | Syntax: options[ n ].value . See "The <OPTGROUP> Element" for an example. | |