Learning WML, and WMLScript

The <optgroup> Element

WAP doesn’t define how the <select> element is displayed. It has been implemented in many different ways, including using pulldown menus, scrolling lists, and lines of checkboxes on PDA-type devices and several different types of menus on cell phones.

With a small screen, it isn’t always possible to display all the available options at the same time. There are several ways to get around this problem: if the options are displayed normally in the text of the page, as with checkboxes for example, then the normal facilities for scrolling the page will do. Many cell phones simply display the currently selected option; activating this for editing changes the screen to a different display with the options. When the editing is complete, the display changes back to the card.

The purpose of the <optgroup> element is to divide a long list of options into several sections. Different browsers may use this information in different ways: many simply ignore it (particularly those running on devices with large screens). Others may display the title of the group as part of the option display but not do anything more with it. Some may use the group title as the name of a submenu, with the contents of the group in that submenu. The information is a hint, nothing more.

The <optgroup> element takes only one attribute:

title (optional variable string)

Specifies a title for this group, which may be used by the browser (for example, as the title of a submenu). It may also be completely ignored.

As an example, the <optgroup> element can be used in the list of pizza toppings to separate the toppings into different groups:

<select name="toppings">
    <optgroup title="Meat &amp; Fish">
            <option value="p">Pepperoni</option>
            <option value="h">Ham</option>
            <option value="b">Spicy Beef</option>
            <option value="a">Anchovies</option>
    </optgroup>
    <optgroup title="Vegetables">
            <option value="o">Olives</option>
            <option value="m">Mushrooms</option>
            <option value="c">Chillies</option>
    </optgroup>
</select>

At publication time, few browsers support the <optgroup> element.