Home Library Learn Downloads Support Community
Sign in | United States - English | |
28 out of 47 rated this helpful - Rate this topic

option element | option object

[This documentation is preliminary and is subject to change.]

Denotes one choice in a SELECT element.

HTML 4.01 Specification, Section 17.6

Standards information

HTML information

Closing Tagforbidden
CSS Displayblock

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     option

Remarks

As of Microsoft Internet Explorer 5 and later, the OPTION elements are part of the all collection. For earlier versions, you can gain access to these elements by applying the options collection to the SELECT element.

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:

Copy 

 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.

Examples

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

Copy 

<SELECT ID="oCars" SIZE="1" onchange="fnChange()">
<OPTION VALUE="1">BMW
<OPTION VALUE="2">PORSCHE
<OPTION VALUE="3" SELECTED>MERCEDES
</SELECT>
<TEXTAREA ID="oData"></TEXTAREA>

This example uses the options collection to append the selected item of the list box in a text area.

Copy 

<SCRIPT LANGUAGE="JScript">
function fnChange(){
   oData.value+=oCars.options[oCars.selectedIndex].text + "\n";
}
</SCRIPT>

See also

multiple

 

 

Build date: 3/8/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
It seems the "dir" attribute doesnt work for option elements
How to change the direction (from ltr to rtl) of an option element in the list? I tried dir, lang, style, but IE 7/8 doesn't change the direction of the given element.
According to the documentation, I should be able to change those settings of an Option element.

sample code:
<select id="sb" style="width:200px;" size="10">
    <option>English phrase</option>
    <option dir="rtl">عدد المواقع: 55</option>
    <option>Russian phrase</option>
</select>

History
Inline Style
Isn't inline STYLE an Attribute/Property of the OPTION element? Like <option style="color#FF0000;">Red</option> ? 
Also, isn't "background" a style setting applicable to the OPTION element ? 

[[jsudds.MSFT]] As a matter of fact, YES they are, no matter what this page says. I'll make sure that it a bug is submitted to fix this page.
History
Yet antother IE 7 bug!
In the document above, you can find the "disabled" property. This property works fine for this object, but only if you are using Google Chrome, Safari or FireFox, don't expect it to work under IE7. Is not unusual to find cases like this, where you read something at an official Microsoft's site just to find out that it applies to all major browsers, and Microsoft's IE is the only exception. It seems to me like there's somthing terribly wrong at Microsoft.

- ST 2010-02-08: If you read the page on the disabled attribute (http://msdn.microsoft.com/en-us/library/ms533732(VS.85).aspx), you'll see that it clearly says "NOTE: For OPTGROUP and OPTION, the functionality specified by the HTML 4.0 standard is not currently implemented." No need to vent your frustrations with flamebait on the MSDN help page.
History