Availability

JavaScript 1.0; enhanced in JavaScript 1.1

Inherits from/Overrides

Inherits from HTMLElement

Synopsis

select.options[i]

Constructor

In JavaScript 1.1, Option objects can be dynamically created with the Option( ) constructor, as follows:

new Option(text, value, defaultSelected, selected)

Arguments

text

An optional string argument that specifies the text property of the Option object.

value

An optional string argument that specifies the value property of the Option object.

defaultSelected

An optional boolean argument that specifies the defaultSelected property of the Option object.

selected

An optional boolean argument that specifies the selected property of the Option object.

Properties

Option inherits the properties of HTMLElement and defines the following:

defaultSelected

A boolean that specifies whether the option is initially selected when the Select object that contains it is created. This value is used to restore a Select object to its initial state when the containing form is reset. The initial value of this property is specified by the selected attribute of the <option> tag.

index

A read-only integer that specifies the position or index of the option within the options[] array of the Select object that contains it. The first Option object in the array has its index property set to 0. The second Option has an index of 1, and so on.

selected

A read/write boolean value that specifies whether an option is currently selected. You can use this property to test whether a given option is selected and to select (by setting it to true) or deselect (by setting it to false) a given option. Note that when you select or deselect an option in this way the Select.onchange( ) event handler is not invoked.

text

A string that specifies the text for the option that appears to the user. The initial value of this property is whatever plain text (without HTML tags) appears after the <option> tag and before the next <option>, </option>, or </select> tag.

In JavaScript 1.0, the text property is read-only. In JavaScript 1.1, it is read/write. By setting a new value for this property, you can change the text that appears for the option within its Select object. Note that if you plan to set this property in a browser that cannot reflow document content, you should ensure that changing the option label does not make the Select object wider. If the object must become wider, ensure that no information to the right of the Select object becomes obscured when it grows.

value

A read/write string that specifies the text passed to the web server if the option is selected when the form is submitted. The initial value of value is specified by the value attribute of the <option> tag. If the form is designed to be submitted to a server (as opposed to simply being used by JavaScript on the client side), each Option object within a Select object should have a distinct value.

HTML Syntax

An Option object is created by an <option> tag within a <select>, which is within a <form>. Multiple <option> tags typically appear within the <select>:

<form ...>
  <select  ...>
    <option
        [ value="value" ]  // The value returned when the form is submitted
        [ selected ] >     // Specifies whether this option is initially selected
    plain_text_label       // The text to display for this option
    [ </option> ]
        ...
  </select>
        ...
</form>

Description

The Option object describes a single option displayed within a Select object. The properties of this object specify whether it is selected by default, whether it is currently selected, the position it has in the options[] array of its containing Select object, the text it displays, and the value it passes to the server if it is selected when the containing form is submitted.

Note that although the text displayed by this option is specified outside of the <option> tag, it must be plain, unformatted text without any HTML tags so it can be properly displayed in list boxes and drop-down menus that do not support HTML formatting.

In JavaScript 1.1, you can dynamically create new Option objects for display in a Select object with the Option( ) constructor. Once a new Option object is created, it can be appended to the list of options in a Select object s by assigning it to:

s.options[options.length] 

See the Select.options[] reference page for details.

See Also

Select, Select.options[]; HTMLOptionElement and HTMLSelectElement in the DOM reference section