July 16, 2001 - Grouping Menu Entries

Yehuda Shiran July 16, 2001, revised December 6, 2002
Grouping Menu Entries
Tips: July 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

The latest browsers (Mozilla 1+, Netscape 6+, Internet Explorer 6+) support a new HTML tag: OPTGROUP. Use it to group selection alternatives in a SELECT element. Try this example:

Here is the HTML code:

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