The Select element allows the user to chose one of a set of alternatives described by textual labels. Every alternative is represented by the <OPTION> element.

Attributes are:

MULTIPLE
The MULTIPLE attribute is needed when users are allowed to make several selections, e.g.

<SELECT MULTIPLE>

NAME
Specifies the name that will submitted as a name/value pair, or the name by which the element can be referred to in a script function.

SIZE
Specifies the number of visible items. If this is greater than one, then the resulting form control will be a list.

ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <SELECT> drop down list (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character in the <SELECT> element, which is not modified in any way to reflect that an ACCESSKEY has been defined.

ALIGN="Alignment"
The ALIGN attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN attribute values of absbottom, absmiddle, baseline, bottom, left, middle, right, texttop and top.

TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main <FORM>. For example, if <FORM> elements have TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <SELECT> section.

LANG="language setting"
The LANG attribute can be used to specify what language the <SELECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.

LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <SELECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <SELECT> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <SELECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <SELECT> element for scripting purposes. Any <SELECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <SELECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.

DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <SELECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.

DISABLED
The DISABLED flag (as with other form elements can be set to prevent the drop-down list from accepting the users focus.

The <SELECT> element is typically rendered as a pull down or pop-up list. For example (from the previous form fragment):

<SELECT NAME="Choice">
<OPTION>Outstanding
<OPTION>Very good
<OPTION>Good
<OPTION>Average
<OPTION>Below Average
<OPTION>Awful
<OPTION SELECTED>My response would be "indecent" under the CDA Act.
</SELECT>

Every <SELECT> element in a document is an object that can be manipulated through scripting. Scripting of the <SELECT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <SELECT> element.)

<SELECT...> Properties
The <SELECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <SELECT> element also has the following properties:

accessKey
The accessKey property directly reflects the setting of the ACCESSKEY attribute (see above).

dataFld
The dataFld property directly reflects the setting of the DATAFLD attribute (see above).

dataSrc
The dataSrc property directly reflects the setting of the DATASRC attribute (see above).

disabled
The disabled property has a boolean value representing whether (disabled=true) or not (disabled=false) the DISABLED flag has been set for the <SELECT> element.

form
The form property contains a reference to the form on which the particular <INPUT> element resides.

length
The length property returns a value representing the number of <OPTION> choices that are present in the <SELECT> element. It is read-writable, meaning that the number of choices can be shrunk/increased through scripting.

multiple
The multiple property has a boolean value (true or false) representing whether or not the MULTIPLE attribute flag has been set for the <SELECT> box.

name
The name property reflects the value of the NAME attribute.

recordNumber
The recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.

selectedIndex
The selectedIndex property returns (or can set) the index of the selected option in the <SELECT> element. The <OPTION> elements contained in the <SELECT> element are all referenced by their index number, starting at 0 for the first <OPTION> and incrementing in the order they appear in the document.

size
The size property directly reflects the value of the SIZE attribute (see above).

tabIndex
The tabIndex property reflects (or sets) the value of the TABINDEX attribute, when used in <SELECT> elements.

type
The type property returns either 'select-one' or 'select-multiple' for the <SELECT> element, depending on whether the MULTIPLE flag has been set or not.

<SELECT...> Methods
The <SELECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <SELECT> element also supports the following methods:

add
The add method can be used to add new options to a <SELECT> element. Note that before an option can be added, its element must first be created using the createElement method of the Document Object (see that topic for details).

The add method accepts arguments of element and index, which represent the element to be added and the index (i.e. position) at which it is to be inserted into the option list. For example, an option element, created with

newOpt=document.createElement(OPTION)

can be added as the first option in a <SELECT> element (whose ID is 'selMain')

selMain.add(newOpt,0)

blur
The blur method can be used to force the users focus away from the referenced <SELECT> element, causing the onblur event (see below) to fire.

focus
The focus method can be used to force the users to focus on the referenced <SELECT> element, causing the onfocus event (see below) to fire.

item
The item method retrieves an element, or collection, from a given collection - in this case, the options collection contained within the <SELECT> element. It has the syntax:

element = Selectobject.item(index [, subindex])

where element is a reference to the returned element (or collection), Selectobject is the <SELECT> element object being referenced, index is a number or string referencing the element to retrieve from the collection and subindex is an optional parameter used when the index argument returns a collection of objects. For example, if the index property is a string value, then subindex could be a numerical value, determining which object is retrieved from the collection of elements whose name or id properties are equal to the value of the index argument.

remove
The remove method can be used to remove any option from the options contained in the <SELECT> element. It requires just the single argument of index, which should be the index of the choice to be removed.

<SELECT...> Events
The <SELECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <SELECT> element also supports the following events:

onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.

onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.

onblur
The onblur event is fired whenever the referenced <SELECT> element loses the users focus (either by the user clicking another section of the document, by 'tabbing' away, or by a script function using the blur method.

onchange
The onchangesubmitting event is fired when the user commits changes to a <SELECT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange event is executed before the onblur event (see above), if the change is committed by the user removing the focus.

onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.

onfocus
Whenever the <SELECT> element receives the users focus, the onfocus event is fired, causing whatever script functions that are linked to it to be executed.

onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.

onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.

© 1995-1998, Stephen Le Hunte

Questions:

• ~NOSPAM~palin_vSPAM at SPAMyahoo.com asks:

  Hi,
  
  i want the focus to be back to List box he no option is selected say if i skip to other field i want the focus to be on the list box till i choose some option.
  
  Here the code goes:
  
  function choice()
  {
  if (document.Register.District.selectedIndex == 1)
  {
  window.alert('You selected District ' +
  (document.Register.District.selectedIndex));
  }
  else {
  window.alert('Please select the District');
  document.Register.District.focus();
  }
  }
  
  

  +
• ~NOSPAM~matt.grenierSPAM at SPAMstroma.ca asks:

  i was trying to add an option to a select list, your example seems like it should work but it isnt working for me. Is there something that isnt there that i need to have (besides a select list)

  +

Comments: