选择列表是用户可以选择的一系列选项. <select></select> 标签在 XHTML MP 中会定义一个选项列表. 其中包含一个或更多的 <option></option> 标签对. <option></option> 标签对定义了列表的选项.
要把已选项的值发送到服务器, 必须要把 <select> 标签与 <form> 标签结合使用. 你可以在本教程稍后的 "在 XHTML MP 中向服务器提交表单数据" 部分学习到如何使用 <form> 标签和如何在服务器上读取所选项目的值.
<select> 标签的 name 属性指定了选择列表的名字. 在服务器端, name 将被用于检索所选项目的值. 选项的值是用 <option> 标签的 value 属性的值指定的.
我们来看一下下面这个 XHTML MP 例子. 它可以让你对我们所讲的内容有一个更好的理解.
(selection_list_example1.xhtml)
<?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.php">
<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>
</p>
</form>
</body>
</html>
上述 XHTML MP 例子在 WAP 浏览器上显示的结果如下.
Sony Ericsson T610 Nokia 移动浏览器 4.0
如果你选择了选项列表, 可用选项的显示效果如下:
Sony Ericsson T610 Nokia 移动浏览器 4.0
<option> 标签的 selected 属性可被用于设定缺省选项. 缺省选项是初始化时选定的选项. selected 属性仅接受 "selected" 值. 下面是演示如何预选择第二个选项 "XHTML MP Tutorial Part B" 的例子:
<option value="tutorial_B" selected="selected">XHTML MP Tutorial Part B</option>
选择多个选项
在前面的 XHTML MP 例子中, 用户只可以选择列表中的一项. 要允许用户选择多个选项选项, 你就要用到 <select> 标签的 multiple 属性. 对 multiple 属性的赋值只能是 "multiple". 这种选项列表中的选项在屏幕上会被显示为复选框.
我们来看下面这个 XHTML MP 例子:
(select_list_example2.xhtml)
<?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.php">
<p>
<select name="selectionList" multiple="multiple">
<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>
上面的 XHTML MP 代码的显示结果如下:
Sony Ericsson T610 Nokia 移动浏览器 4.0
当 <select> 标签中出现 multiple 属性时, 也是可以指定多个缺省选项的. 要指定多个缺省选项, 只须向每个缺省要选择的选项的 <option> 标签中添加 selected="selected" 就可以了. 下面是一个示例:
<select name="selectionList" multiple="multiple">
<option value="tutorial_A" selected="selected">XHTML MP Tutorial Part A</option>
<option value="tutorial_B" selected="selected">XHTML MP Tutorial Part B</option>
<option value="tutorial_C">XHTML MP Tutorial Part C</option>
</select>
上面几行代码告诉了 WAP 浏览器, 选择列表的第一个和第二个选项要被预先选择.
组织 XHTML MP 中选择列表的选项
如果某 XHTML MP 选择列表包含的选项非常多, 看上去就不会显得很有组织性. 要避免此问题, 你可以把选项安排成几个组. 定义一个选项组用的是 <optgroup></optgroup> 标签对. <optgroup> 标签的 label 属性指定了一个选项组的标题.
关于 <optgroup></optgroup> 标签的用法, 下面的 XHTML MP 例子给出了演示:
(select_list_example3.xhtml)
<?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.php">
<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>
下面是上述 XHTML MP 例子在 WAP 浏览器中的显示效果:
Sony Ericsson T610 Nokia 移动浏览器 4.0
Web 
