Selecting Multiple Options (Check Boxes)

Preferences - Do not show ads

In the previous WML example, the user can only select one option of the selection list. To allow the user to select multiple options, you can make use of the multiple attribute of the <select> element. Its value can be either true or false (false is the default value). If the value of the multiple attribute is true, the options will be displayed as check boxes and a user can check multiple options.

Let's take a look at the following WML example. It can help you understand better what we are talking about.

(selListEg2.wml)

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

<wml>
  <card id="card1" title="Selection List">
    <p>
      This is a selection list:<br/>
      <select name="selection_list" multiple="true">
        <option value="tutorial_A">WML Tutorial A</option>
        <option value="tutorial_B">WML Tutorial B</option>
        <option value="tutorial_C">WML Tutorial C</option>
      </select>
    </p>
  </card>
</wml>

The result of the above WML code in some mobile phone browsers is shown below:

Let's say you check the first and second check boxes as in the above screenshots. If you print out the value of the selection_list variable, you will find that it is tutorial_A;tutorial_B. Notice that the two option values are separated by a semicolon.

When multiple="true" is present in the <select> tag, it is possible to specify multiple default options that are pre-selected. For example, let's say you want the second option "WML Tutorial B" and the third option "WML Tutorial C" to be pre-selected. You can specify tutorial_B;tutorial_C (notice that the two option values are separated by a semicolon) as the value of the value attribute of the <select> tag, like this:

<select name="selection_list" multiple="true" value="tutorial_B;tutorial_C">
  <option value="tutorial_A">WML Tutorial A</option>
  <option value="tutorial_B">WML Tutorial B</option>
  <option value="tutorial_C">WML Tutorial C</option>
</select>

Enter your search terms Submit search form   Web DevelopersHome.com