Denotes one choice in a selectable list.

HTML Syntax

<option
   class = classname
   id = value
   selected
   value = value
>

The OPTION element is used to define a selectable item in a selection list created with the SELECT element. OPTION can only be used within SELECT tags.

When a FORM containing a selection list is submitted for processing, the control name is provided by the SELECT element and the value provided by the selected OPTION element. If the OPTION specifies a value attribute, that value is sent. Otherwise, it is the text that follows the <option> tag. Only the selected option value ( s ) are submitted to the server.

This element is a block element.

An <option> element’s end tag can be omitted if the <option> element is immediately followed by another <option> element, if it is immediately followed by an <optgroup> element, if it is immediately followed by an <hr> element, or if there is no more content in the parent element.

The following HTML creates a drop-down list box.

<form name="theForm">
<select name="theList">
   <option>Alpha Romeo
   <option>BMW
   <option>Ferrari
   <option>Mercedes-Benz
   <option>Porsche
   <option>Range Rover
</select>
</form>

OPTION elements can be accessed in client-side script by using the options collection of the SELECT element. The following script example retrieves and displays the text for all options in the SELECT example above.

<script language="JavaScript">
<!--
function getOpts ( ) {
var list = 
  document.forms['theForm'].elements['theList'];
var opts="";
for ( i=0;i<list.options.length;i++ )
  opts += list.options[i].text+"\n";
alert ( "These are your options: \n"+opts );}
//-->
</script>

 Show me 

Except for background-color and color, style settings applied through the style object for the OPTION object are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT object as a whole.

selected, defaultSelected, SELECT, multiple, selectedIndex, options