{"id":241,"date":"2007-09-18T00:00:00","date_gmt":"2007-09-18T00:00:00","guid":{"rendered":"http:\/\/www.strongd.net\/?p=241"},"modified":"2007-09-18T00:00:00","modified_gmt":"2007-09-18T00:00:00","slug":"XHTML MP Selection Lists","status":"publish","type":"post","link":"https:\/\/www.strongd.net\/?p=241","title":{"rendered":"XHTML MP Selection Lists"},"content":{"rendered":"

A selection list is a list of options that a user can select. The <select><\/select> tags define a selection list in XHTML MP. One or more <option><\/option> tag pairs are enclosed within the <select><\/select> tags. The <option><\/option> tag pair defines a list item.<\/FONT><\/P>

To send the value of the selected item to the server, the <select> tag has to be used in conjunction with the <form> tag. You can learn how to use the <form> tag and how to read the value of the selected item at the server later in the “Sending Data to the Server in XHTML MP<\/A>” section of this tutorial.<\/FONT><\/P>

The name<\/I> attribute of the <select> tag specifies the name of a selection list. At the server-side, the name will be used to retrieve the value of the selected item. The value of an item is specified with the value<\/I> attribute of the <option> tag.<\/FONT><\/P>

Let’s take a look at the following XHTML MP example. It can help you understand better what we are talking about.<\/FONT><\/P>


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-\/\/WAPFORUM\/\/DTD XHTML Mobile 1.0\/\/EN” “http:\/\/www.wapforum.org\/DTD\/xhtml-mobile10.dtd”>

<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
  <head>
    <title>XHTML MP Tutorial<\/title>
  <\/head>

  <body>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList”>
          <option value=”tutorial_A”>XHTML MP Tutorial Part A<\/option>
          <option value=”tutorial_B”>XHTML MP Tutorial Part B<\/option>
          <option value=”tutorial_C”>XHTML MP Tutorial Part C<\/option>
        <\/select><\/B>
      <\/p>
    <\/form>
  <\/body>
<\/html><\/FONT><\/P>


<\/P>

The result of the above XHTML MP example in WAP browsers is shown below.<\/FONT><\/P>






<\/TBODY><\/TABLE>


<\/P>

If you select the selection list, the options available will be displayed like this:<\/FONT><\/P>



Sony Ericsson T610<\/FONT><\/P><\/TD>



Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD>







<\/TBODY><\/TABLE>


<\/P>

The selected<\/I> attribute of the <option> tag can be used to set the default option. The default option will be initially selected. The selected<\/I> attribute only accepts the value “selected”. Here is an example that shows how to pre-select the second option “XHTML MP Tutorial Part B”:<\/FONT><\/P>


<\/P>

<option value=”tutorial_B” selected=”selected”<\/B>>XHTML MP Tutorial Part B<\/option><\/FONT><\/P>


<\/P>

<\/A>Selecting Multiple Options<\/H2>

In the previous XHTML MP example, a user can only select one option of the selection list. To allow a user to select multiple options, you need to make use of the multiple<\/I> attribute of the <select> tag. The multiple<\/I> attribute can only be assigned with the value “multiple”. Options in such kind of selection lists are displayed as check boxes on the screen.<\/FONT><\/P>

Let’s take a look at the following XHTML MP example:<\/FONT><\/P>

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-\/\/WAPFORUM\/\/DTD XHTML Mobile 1.0\/\/EN” “http:\/\/www.wapforum.org\/DTD\/xhtml-mobile10.dtd”>

<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
  <head>
    <title>XHTML MP Tutorial<\/title>
  <\/head>

  <body>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList” multiple=”multiple”<\/B>>
          <option value=”tutorial_A”>XHTML MP Tutorial Part A<\/option>
          <option value=”tutorial_B”>XHTML MP Tutorial Part B<\/option>
          <option value=”tutorial_C”>XHTML MP Tutorial Part C<\/option>
        <\/select>
      <\/p>
    <\/form>
  <\/body>
<\/html><\/FONT><\/P>


<\/P>

The result of the above XHTML MP code is shown below:<\/FONT><\/P>




Sony Ericsson T610<\/FONT><\/P><\/TD>



Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD>







<\/TBODY><\/TABLE><\/P>


<\/P>

When the multiple<\/I> attribute is present in the <select> tag, it is possible to specify multiple default options. To do so, add selected=”selected”<\/I> to each of the <option> tags that should be selected by default. Here is an example:<\/FONT><\/P>


<\/P>

<select name=”selectionList” multiple=”multiple”>
  <option value=”tutorial_A” selected=”selected”<\/B>>XHTML MP Tutorial Part A<\/option>
  <option value=”tutorial_B” selected=”selected”<\/B>>XHTML MP Tutorial Part B<\/option>
  <option value=”tutorial_C”>XHTML MP Tutorial Part C<\/option>
<\/select><\/FONT><\/P>


<\/P>

The above lines of code tell the WAP browser that the first and second options of the selection list should be pre-selected.<\/FONT><\/P>


<\/P>

<\/A>Organizing Options in XHTML MP Selection Lists<\/H2>

If an XHTML MP selection list contains too many options, it will look disorganized. To tackle this, you can arrange options into groups. You define an option group using the <optgroup><\/optgroup> tag pair. The label<\/I> attribute of the <optgroup> tag specifies the title of an option group.<\/FONT><\/P>

The usage of the <optgroup><\/optgroup> tags is shown in this XHTML MP example:<\/FONT><\/P>

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-\/\/WAPFORUM\/\/DTD XHTML Mobile 1.0\/\/EN” “http:\/\/www.wapforum.org\/DTD\/xhtml-mobile10.dtd”>

<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
  <head>
    <title>XHTML MP Tutorial<\/title>
  <\/head>

  <body>
    <form method=”get” action=”xhtml_mp_tutorial_proc.asp”>
      <p>
        <select name=”selectionList”>
          <optgroup label=”Tutorial Ch1″>
            <option value=”tutorial_1A”>Part 1A<\/option>
            <option value=”tutorial_1B”>Part 1B<\/option>
            <option value=”tutorial_1C”>Part 1C<\/option>
          <\/optgroup>
          <optgroup label=”Tutorial Ch2″>
            <option value=”tutorial_2A”>Part 2A<\/option>
            <option value=”tutorial_2B”>Part 2B<\/option>
            <option value=”tutorial_2C”>Part 2C<\/option>
          <\/optgroup>
          <optgroup label=”Tutorial Ch3″>
            <option value=”tutorial_3A”>Part 3A<\/option>
            <option value=”tutorial_3B”>Part 3B<\/option>
            <option value=”tutorial_3C”>Part 3C<\/option>
          <\/optgroup>
        <\/select>
      <\/p>
    <\/form>
  <\/body>
<\/html><\/FONT><\/P>


<\/P>

This is the result of the above XHTML MP example in WAP browsers:<\/FONT><\/P>






<\/P>


Sony Ericsson T610<\/FONT><\/P><\/TD>





<\/P>


Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD>







<\/TBODY><\/TABLE><\/P><\/DIV><\/p>\n","protected":false},"excerpt":{"rendered":"

A selection list is a list of options that a user can select. The <select><\/select> tags define a selection list in XHTML MP. One or more <option><\/option> tag pairs are enclosed within the <select><\/select> tags. The <option><\/option> tag pair defines a list item.To send the value of the selected item to the server, the <select> … Continue reading XHTML MP Selection Lists<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=241"}],"version-history":[{"count":0,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}





<\/P>




<\/P>




<\/P>


Sony Ericsson T610<\/FONT><\/P><\/TD>





<\/P>




<\/P>




<\/P>


Nokia Mobile Browser 4.0<\/FONT><\/P><\/TD><\/TR><\/THEAD>