option

< html‎ | elements
Jump to: navigation, search

option

This article is In Progress.


W3C Recommendation

Summary

Denotes one choice in a select element.


Overview Table

DOM Interface HTMLOptionElement

Attributes

  • disabled = boolean
    if present, disable a option.
  • label = string
    Provides a label for element.
    If there isn't, the label of an option element is the textContent of the element.
  • value = string
    Provides a value for element.
    If there isn't, the value of an option element is the textContent of the element.
  • selected = boolean
    Represents the default selectedness of the element. [Example A]


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Examples

This example uses the OPTION element to create individual items in a drop-down list box.

HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Example</title>
 </head>
 <body>
  <select id="car-list" size="1">
   <option value="1">BMW</option>
   <option value="2">PORSCHE</option>
   <option value="3" selected>MERCEDES</option>
  </select>
  <textarea id="text-area"></textarea>
 </body>
</html>

Using the markup of the previous example, this JavaScript example uses the options collection to append the selected item of the list box in a text area.

JavaScript

function appendCar() {
  var carListElement = document.getElementById("car-list");
   document.getElementById("text-area").value +=carListElement.options[carListElement.selectedIndex].text + "\n";
}
document.addEventListener("DOMContentLoaded", appendCar, false);

As a child of an optgroup element

HTML

<form action="courseselector.dll" method="get">
  <p>Which course would you like to watch today?
  <p><label>Course:
    <select name="c">
      <optgroup label="8.01 Physics I: Classical Mechanics">
        <option value="8.01.1">Lecture 01: Powers of Ten</option>
        <option value="8.01.2">Lecture 02: 1D Kinematics</option>
        <option value="8.01.3">Lecture 03: Vectors</option>
      </optgroup>
      <optgroup label="8.02 Electricity and Magnestism">
        <option value="8.02.1">Lecture 01: What holds our world together?</option>
        <option value="8.02.2">Lecture 02: Electric Field</option>
        <option value="8.02.3">Lecture 03: Electric Flux</option>
      </optgroup>
      <optgroup label="8.03 Physics III: Vibrations and Waves">
        <option value="8.03.1">Lecture 01: Periodic Phenomenon</option>
        <option value="8.03.2">Lecture 02: Beats</option>
        <option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option>
      </optgroup>
    </select>
  </label>
  <p><input type=submit value="▶ Play">
</form></optgroup>

Notes

You can create new OPTION elements dynamically with the document.createElement method, but you cannot change properties until the new element is added to a SELECT object. Or, you can create fully formed elements by using the Option object, as follows:

 var opt = new Option( 'Text', 'Value', fDefaultSelected ); 

You can add OPTION elements only to a SELECT element that is located in the same window where the OPTION elements are created. Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.


Related specifications

Specification Status Related Changes
HTML 5.1 W3C Working Draft
HTML 5 W3C Recommendation
HTML 4.01 W3C Recommendation

See also

Related articles

HTML


















































… further results

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]