The SELECT Element


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.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net