Learning WML, and WMLScript

The <select> Element

The other high-level control that WML provides is one allowing selection from a list of items. This replaces many different types of control, such as scrolling selectable lists, pulldown menus, and lists of checkboxes.

In its simplest form, the <select> element provides an iname attribute giving a WML variable name. Inside the <select> is a list of <option> elements. Selecting an option sets the iname variable to the index of that item within the <select>, starting from 1. For example:

<select iname="animal">
    <option>Lizard</option>
    <option>Spider</option>
    <option>Squid</option>
</select>

Selecting Lizard sets animal to 1, selecting Spider sets it to 2, and selecting Squid sets it to 3.

In a slightly more complex form, the <select> element has a name attribute rather than iname, and a list of <option> elements, each of which has a value attribute. Selecting one of these options sets the name variable to the contents of the option’s value attribute. For example, a list allowing the user to select a London airport can be written as:

<select name="airport">
    <option value="LHR">London Heathrow</option>
    <option value="LGW">London Gatwick</option>
    <option value="STN">London Stansted</option>
    <option value="LCY">London City</option>
    <option value="LTN">London Luton</option>
</select>

Selecting an option sets airport to the corresponding three-letter airport code.

Attributes of the <select> Element

title (optional variable string)

Provides an optional title for the <select> element, which some browsers may use in its presentation. Others may ignore it.

iname (optional name)

Specifies a WML variable to be set to the index of the selected item. If this is specified and the variable is already set to an index value, it selects the default value. This takes precedence over ivalue, name, and value for determining the default value.

ivalue (optional variable number)

Specifies the index of the value that should be the default if the iname attribute isn’t present or its variable isn’t set. This takes precedence over name and value for setting the default.

name (optional name)

Specifies a WML variable to be set to the contents of the value attribute from the selected option. This may also be used to determine the default value. (The first <option> whose value matches the contents of this variable is selected but only if iname and ivalue have failed to select an item.) This takes precedence over only value.

value (optional variable string)

Specifies the default value of the <select>. The first item with a value attribute matching this is selected. This attribute is used only when iname, ivalue, or name haven’t managed to select a default value.

multiple (optional boolean; default false)

If set to true, indicates that this <select> should allow more than one <option> to be active at a time. In this case, the behavior of the name, value, iname, and ivalue attributes changes slightly. (More on this in Section 4.4.2 later in this chapter).

tabindex (optional number)

As with <input>, this provides a hint to the browser as to how it should cycle through all the controls in the card. See Section 4.10 later in the chapter for more on tabindex.

Multiple Selection

When a <select> item has a multiple="true" attribute, it allows more than one item to be selected from the list simultaneously. Such a <select> treats the values of the name, value, iname, and ivalue attributes differently than normal. Instead of each representing a single item (either an index or something matching an option’s value), each is treated as a list of values separated by semicolons. (This has the minor side-effect that semicolons are not valid in the value attributes on any <option> in a multiple-selection <select>.) The actual order of the values between the semicolons isn’t defined by WML.

For example, a WAP pizza delivery service could use something similar to Example 4.2 to let people choose the toppings for their pizza. Note that this doesn’t allow people to select the same topping more than once. If they want that, they can phone in the order!

Example 4-2. Multiple Selection

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC
    "-//WAPFORUM//DTD WML 1.1//EN"
    "http">

<wml>
    <card title="Pizza Toppings">
        <p>Choose your toppings:
        <select name="toppings" multiple="true">
            <option value="p">Pepperoni</option>
            <option value="h">Ham</option>
            <option value="b">Spicy Beef</option>
            <option value="a">Anchovies</option>
            <option value="c">Chillies</option>
            <option value="o">Olives</option>
            <option value="m">Mushrooms</option>
            <!-- ...lots more toppings here... -->
        </select></p>
        <do type="accept" label="Order">
            <go href="order?toppings=$(toppings:e)"/>
        </do>
    </card>
</wml>

If I then decide that I want a pizza with all these toppings except anchovies, the variable toppings is set to p;h;b;c;o;m, or m;o;c;b;h;p, or b;c;h;m;o;p, or any of the 717 other combinations of those six items. (No, I’m not going to list them all.)

If there had been an iname as well as (or perhaps instead of) the name, the variable it referenced is set to 1;2;3;5;6;7 or a permutation of those values.

In single-selection lists, however, the character ; is valid in option values. Example 4.3 shows Example 4.2 extended with an earlier card offering set pizzas and the chance to customize them by adding and removing toppings. Note that the option of going back from the second card to the first isn’t provided here. This is because the values in the toppings variable may not be in the same order as they were when the first <select> initialized them, because their order is not fixed after a multiple selection .

Example 4-3. Mixed Selections

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC
    "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>
    <card title="Set Pizzas" id="pizzas">
        <p>Choose a Pizza:<select name="toppings">
            <option value="">
                <!-- no toppings -->
                Plain
            </option>
            <option value="p;m;o">
                <!-- pepperoni, mushrooms, olives -->
                Pepperoni Supreme
            </option>
            <option value="p;b;h;a;m;o;c">
                <!-- everything! -->
                Full House
            </option>
            <option value="c;o;m">
                <!-- chillies, olives, mushrooms -->
                Vegetarian
            </option>
        </select></p>
        <do type="accept" label="Order">
            <go href="order?toppings=$(toppings:e)"/>
        </do>
        <do type="accept" label="Customize">
            <go href="#toppings"/>
        </do>
    </card>

    <card title="Pizza Toppings" id="toppings">
        <p>Customize your Toppings
        <select name="toppings" multiple="true">
            <option value="p">Pepperoni</option>
            <option value="h">Ham</option>
            <option value="b">Spicy Beef</option>
            <option value="a">Anchovies</option>
            <option value="o">Olives</option>
            <option value="m">Mushrooms</option>
            <option value="c">Chillies</option>
        </select></p>
        <do type="accept" label="Order">
            <go href="order.cgi?toppings=$(toppings:e)"/>
        </do>
    </card>
</wml>