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

text | NN 2 IE 3 DOM 1
| Read/Write
Provides the text associated with the option element. This text is located between the start and end tags; it is what appears in the select element on screen. A hidden value associated with the list item can be stored, retrieved, and changed via the value property.
Example
    var list = document.forms[0].selectList;
    var listItemText = list.options[list.selectedIndex].text;
Value
String.
Default
None.

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.