|
菜单列表类控件主要用来进行选择给定答案中的一种。虽然也可以用单选按钮来做，但单选按钮比较浪费空间，菜单和列表则很节省空间。
下拉菜单是一种最节省页面空间的选择方式，语法为：
<select name = 控件名称>
<option value = 选项值1 selected>显示内容1</option>
<option value = 选项值2>显示内容2</option>
……
<option value = 选项值n>显示内容n</option>
</select>
在该语法中，“选项值”是提交表单时间的值，是供程序内部使用的。程序通过检测该菜单的value值，可以知道用户选择了哪一项，而选项显示的内容才是真正显示给用户的。selected表示某选项在初始情况下处于选中状态，一个下拉菜单中只能有一个项默认被选中。
【例7】使用下拉菜单。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
你最喜欢吃什么？：
<select name = "bestlike">
<option value = " radish">萝卜</option>
<option value = "cabbage">白菜</option>
<option value = "gp" selected>青椒</option>
<option value = "tomato">西红柿</option>
<option value = "pork">猪肉</option>
<option value = "beef">牛肉</option>
<option value = "egg">鸡蛋</option>
</select>
</form>
</body>
</html>
可以看出，下拉菜单一共有七个选项，其中“青椒”处于默认的选中状态。
列表的设置方法与下拉菜单类似。所不同的是，列表在页面中可以显示多个条目，语法为：
<select name = 控件名称 size = 显示的项数 multiple>
<option value = 选项值1 selected>显示内容1</option>
<option value = 选项值2>显示内容2</option>
……
<option value = 选项值n>显示内容n</option>
</select>
在该语法中，size设置页面中显示的列表项数，当列表中的项数超过这个值时会出现滚动条。multiple表示这一列表可以进行多项选择。
【例8】使用列表。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
你最喜欢吃什么？：
<select name = "bestlike" size = "4">
<option value = " radish">萝卜</option>
<option value = "cabbage">白菜</option>
<option value = "gp" selected>青椒</option>
<option value = "tomato">西红柿</option>
<option value = "pork">猪肉</option>
<option value = "beef">牛肉</option>
<option value = "egg">鸡蛋</option>
</select>
你喜欢玩什么？：
<select name = "bestplay" size = "4" multiple>
<option value = "footbal" selected>足球</option>
<option value = "basketball">篮球</option>
<option value = "computer" selected>电脑游戏</option>
</select>
</form>
</body>
</html>
第一个列表bestlike显示四项，有滚动条，但不能多选；第二个列表bestplay虽然也有四项空间，但因列表中只有三项，所以没有滚动条，但可以多选（左手按住Ctrl或Shift键，右手点鼠标左键）。
这个例子看起来不那么漂亮，因为顶端没有水平对齐。可以使用表格，把列表和文字放在同一行的单元格中，利用<td>的valign属性，让它们顶端对齐。
上一篇：10.4 单选按钮和复选框 下一篇：10.6 按钮
|
