Select object (Object/HTML)

A drop down menu containing a list of <OPTION> items. These are used in forms to build menus and pop-ups. They may select single items or multiple items.

Availability:

DOM level - 1
JavaScript - 1.0
JScript - 1.0
Internet Explorer - 3.02
Netscape - 2.0
Opera - 3.0
Inherits from:Element object object
JavaScript syntax:IEmySelect = myDocument.all.anElementID
IEmySelect = myDocument.all.anElementID.elements[anIndex]
IEmySelect = myDocument.all.tags("SELECT")[anIndex]
IEmySelect = myDocument.all[aName]
-mySelect = myDocument.getElementById(anElementID)
-mySelect = myDocument.getElementsByName(aName)[anIndex]
-mySelect = myDocument.getElementsByTagName("SELECT")[anIndex]
-mySelect = myForm.aSelectName
-mySelect = myForm.elements[anIndex]
-mySelect = myForm[anIndex]
HTML syntax:<SELECT> ... </SELECT>
Argument list:anIndexA valid reference to an item in the collection
aNameThe name attribute of an element
anElementIDThe ID attribute of an element
aFormIndexA reference to a particular form in the forms collection
Object properties:accessKey, dataFld, dataSrc, form, length, multiple, selectedIndex, size, tabIndex, type, value
Object methods:add(), remove(), tags()
Event handlers:onAfterUpdate, onBeforeUpdate, onBlur, onChange, onDragStart, onFilterChange, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize, onRowEnter, onRowExit, onSelectStart
Collections:options[]

Many properties, methods and event handlers are inherited from the Input object class. Refer to topics grouped with the "Input" prefix for details of common functionality across all sub-classes of the Input object super-class.

Unusually, there actually is a Select object class where most other kinds of input are instances of an Input object.

Event handling support via properties containing function objects was added to Select popup objects at version 1.1 of JavaScript.

Unlike MSIE, the Netscape Navigator implementation of this object type does not support the click() method.

The MSIE instance of this object is actually a SELECT object and not a Select object. This is another example of class naming differences between browsers that may cause problems later.

Warnings:

Example code:

   <HTML>
   <HEAD>
   </HEAD>
   <BODY>
   <DIV ID="RESULT">???</DIV>
   <FORM>
   <HR>
   <SELECT ID="IN1">
   <OPTION VALUE="0">Sunday
   <OPTION VALUE="1">Monday
   <OPTION VALUE="2">Tuesday
   <OPTION VALUE="3">Wednesday
   <OPTION VALUE="4">Thursday
   <OPTION VALUE="5">Friday
   <OPTION VALUE="6">Saturday
   </SELECT>
   <INPUT TYPE="button" VALUE="CLICK ME" onClick="clickMe()">
   </FORM>
   <SCRIPT>
   //MSIE Only
   function clickMe()
   {
      selectedValue  = document.all.IN1.value;
      document.all.RESULT.innerText = selectedValue;
   }
   </SCRIPT>
   </BODY>
   </HTML>

See also:Element object, Form.elements[], FormElement object, Input object, Input.accessKey, onChange, Option object, OptionsArray object, response.getOptionValue(), response.getOptionValueCount()

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
accessKey1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning
dataFld1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning
dataSrc1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning
form1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning
length1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aReadOnly.
multiple1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-
selectedIndex1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/a-
size1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-
tabIndex1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning
type1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a1 1 n/a n/aReadOnly.
value1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
add()1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-
remove()1.5 1.53.0 3.06.0 6.04.0 4.0 n/a n/a n/a1 1 n/a n/a-
tags() n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onAfterUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBeforeUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBlur1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onChange1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a n/a-
onDragStart n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFilterChange n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFocus1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onHelp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onKeyDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyPress1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseMove1.2 1.23.0 3.04.0 4.04.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOut1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseOver1.0 1.01.0 1.02.0 2.03.0 3.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onResize1.2 1.23.0 3.04.0 4.04.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onRowEnter n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onRowExit n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onSelectStart n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Inheritance chain:

Element object, Node object