上海网站建设

上海网站建设

咨询热线:(021)51698180


HTML,CSS

上海网站建设RSS订阅  RSS订阅  新浪微博  新浪微博  上海网站建设客服  客服  获取报价  获取报价

XHTML MP教程(十九):XHTML MP 选择列表

选择列表是用户可以选择的一系列选项. <select></select> 标签在 XHTML MP 中会定义一个选项列表. 其中包含一个或更多的 <option></option> 标签对. <option></option> 标签对定义了列表的选项.

要把已选项的值发送到服务器, 必须要把 <select> 标签与 <form> 标签结合使用. 你可以在本教程稍后的 "在 XHTML MP 中向服务器提交表单数据" 部分学习到如何使用 <form> 标签和如何在服务器上读取所选项目的值.

<select> 标签的 name 属性指定了选择列表的名字. 在服务器端, name 将被用于检索所选项目的值. 选项的值是用 <option> 标签的 value 属性的值指定的.

我们来看一下下面这个 XHTML MP 例子. 它可以让你对我们所讲的内容有一个更好的理解.
 
<?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>
    </p>
    </form>
  </body>
</html>
 
上述 XHTML MP 例子在 WAP 浏览器上显示的结果如下.
 
XHTML MP教程(十八):XHTML MP 选择列表1

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 选择列表2

Nokia Mobile Browser 4.0
 
如果你选择了选项列表, 可用选项的显示效果如下:
 
XHTML MP教程(十八):XHTML MP 选择列表3

Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 选择列表4

Nokia Mobile Browser 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 例子:
 
<?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">
        <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 代码的显示结果如下:
 
XHTML MP教程(十八):XHTML MP 选择列表5
 
XHTML MP教程(十八):XHTML MP 选择列表6
Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 选择列表7
 
XHTML MP教程(十八):XHTML MP 选择列表8
Nokia Mobile Browser 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 例子给出了演示:
 
<?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>
 
下面是上述 XHTML MP 例子在 WAP 浏览器中的显示效果:
 
XHTML MP教程(十八):XHTML MP 选择列表9
 
XHTML MP教程(十八):XHTML MP 选择列表10
 
XHTML MP教程(十八):XHTML MP 选择列表11
 
XHTML MP教程(十八):XHTML MP 选择列表12
Sony Ericsson T610
XHTML MP教程(十八):XHTML MP 选择列表13
 
XHTML MP教程(十八):XHTML MP 选择列表14
 
XHTML MP教程(十八):XHTML MP 选择列表15
 
XHTML MP教程(十八):XHTML MP 选择列表16
Nokia Mobile Browser 4.0
 
由花火网络整理 www.hahoo.cn 上海网站建设