option

NN 2 IE 3 DOM 1

The option object reflects the option element, which must be nested inside a select element. References to option objects most often use its parent select object, with the option object treated as one member of an array of options belonging to that select object. With modern browsers, you can also reference an option object directly via its ID. The disabled property (described among the shared properties earlier in this chapter) is available for IE 4 and later and Netscape 6.

You can modify the set of options in a select object in browsers starting with Netscape 3 and Explorer 4 with backward-compatible code that continues to work in the newest browsers. If the modification entails replacing existing options with a different list of the same length, you can simply assign new values to text, value, and selected properties of each option in the select object's options array. But if the list has a different number of options, you are better served by removing all existing option objects and inserting new ones. A constructor function for a new Option object lets you create objects one at a time, and then assign them to positions within the options array. Syntax for the constructor is as follows:

var newOpt = new Option("text", "value", isDefaultSelectedFlag, 
isSelectedFlag);

The following function demonstrates the typical steps involved in rewriting a select object's list of options:

function setSelect(selectElemObj) {
    // remove existing options
    selectElemObj.options.length = 0;
    // create and assign options, one by one
    selectElemObj.options[0] = new Option("Hercule Poirot", "poirot", false, false);
    selectElemObj.options[1] = new Option("Miss Marple", "marple", false, false);
    ...
}

In a production environment, the values for the constructor parameters would most likely be delivered to the page as an array of objects, allowing the stuffing of new options to be carried out inside a for loop. For additional approaches to this task, see the options.add( ) method (for IE only) and the select.add( ) method (for IE 5 or later and Netscape 6 only).

HTML Equivalent

<option>

Object Model Reference

[window.]document.formName.selectName.options[i]
[window.]document.forms[i].elements[i].options[i]
[window.]document.getElementById("elementID")

Object-Specific Properties

defaultSelected

form

index

label

selected

text

value

Object-Specific Methods

None.

Object-Specific Event Handler Properties

None.

defaultSelected	NN 2 IE 3 DOM 1
	Read/Write
Determines whether an element has the selected attribute set in the tag. You can compare the current selected property against defaultSelected to see whether the state of the select control has changed since the document loaded. Changing this property does not affect the current selected status.

Example

var listItem = document.forms[0].selector.options[2]; if (listItem.selected != listItem.defaultSelected) { // process for changed state }

Value
Boolean value: true \| false.

Default
Determined by HTML tag attribute.

form	NN 6 IE 4 DOM 1
	Read-only
Returns a reference to the form object that contains the select element and its options.

Example

var theForm = document.getElementById("myOption3").form;

Value
form object reference.

Default
None.

index	NN 6 IE 3 DOM 1
	Read-only
Returns the zero-based index integer value of the current option object within the collection of options of the select element. The select object's selectedIndex property returns the index value of the option that is currently selected.

Example

var whichItem = document.getElementById("myOption3").index;

Value
Integer.

Default
None.

label	NN 6 IE 5(Mac)/6(Win) DOM 1
	Read/Write
Reflects the label attribute of the option element. This property is intended for use with hierarchical menus, but it is not operational in browsers except for IE 5/Mac, where it returns the same value as the text property.

Value
String.

Default
None.

selected	NN 2 IE 3 DOM 1
	Read/Write
Determines whether the list option has been selected by the user, meaning that its value is submitted with the form. Scripts can modify the value to select an item algorithmically. To find out which option is selected, it is more efficient to use the select object's selectedIndex property, rather than looping through all options in search of those whose selected properties are true. The exception to this is when the select element is set to allow multiple selections, in which case you need to cycle through them all to find the chosen items.

Example

document.forms[0].selectList.options[3].selected = true;

Value
Boolean value: true \| false.

Default
false

value	NN 4 IE 4 DOM 1
	Read/Write
Provides the value associated with the option element. If the option element has a value attribute or value property set, this is the value returned for the value property; otherwise, the property returns an empty string.

Example

var itemValue = document.forms[0].selectList.options[2]value;

Value
String.

Default
None.