RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/html/elements/option below:

option · WebPlatform Docs

option 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]

Examples

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

<!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.

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

<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

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation
HTML 4.01: W3C Recommendation