<SELECT>
    <OPTGROUP  ID="ford" LABEL="Ford">
        <OPTION>Taurus</OPTION>
        <OPTION>Escort</OPTION>
        <OPTION>Focus</OPTION>
    </OPTGROUP>
    <OPTGROUP  ID="opel" LABEL="Opel">
        <OPTION>Astra</OPTION>
        <OPTION>Corsa</OPTION>
        <OPTION>Omega</OPTION>
    </OPTGROUP>        
</SELECT>

We now have two objects on this page: ford and opel. They support two properties: disabled and id. The property disabled can be set to true and then the group should be unavailable for selection in the SELECT menu. Here is how you set disabled:

<SCRIPT LANGUAGE="JavaScript">
<!--
document.getElementById('ford').disabled = true;
// -->
</SCRIPT>

Click here to disable the ford group and click here to alert it. You can view the disabled value by doing this:

<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.getElementById('ford').disabled);
// -->
</SCRIPT>

Beware of browser differences when using this new tag, however. In Netscape 6.x, groups are displayed but there is no visual difference to the user when a group is disabled. Additionally, if an item had previously been selected in a now disabled group it will still be visible as the selected option. This latter point is also true for Netscape 7 and Mozilla, though those browsers do change the color of a disabled group to indicate that it is disabled. Finally, in Internet Explorer 6 the disabled parameter does not appear to make any change to the select group; items are still visible and selectable after setting disabled to true.

People who read this tip also read these tips:

• Formatting the First Page for Printing using JavaScript
• The Attribute Node
• Hopping to the Document's Root
• The Document Fragment Node
• Removing an Attribute Node