在下拉列表框(select)中,是支持选项(option)分组的,利用的是 optgroup。
看示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>optgroup</title>
</head>
<body>
<select name="c" size="10" onchange="javascript:document.getElementById('foo').innerHTML='选中项的 selectedIndex 是:'+this.selectedIndex;">
<optgroup label="鱼类">
<option>鲫鱼</option>
<option>鲤鱼</option>
</optgroup>
<optgroup label="禽类">
<option>鸡</option>
<option>鸭</option>
<option>鹅</option>
</optgroup>
<option>未分类</option>
</select>
<div id="foo"></div>
</body>
</html>
效果如下:
- XHTML 1.0 支持 optgroup。
- optgroup 不支持嵌套。
optgroup onchange 的 bug,姑且称其为 bug。已经确信在 IE6.0 中存在该 bug,在 FireFox 中不存在,具体如下:
我们知道,除了使用鼠标选择选项外,还可以利用键盘上的方向键进行选择,在 IE 中,当我们选中了上述中的“鲤鱼”,再按下方向键使“鸡”被选中,这时下拉列表框的 onchange 事件没有被触发,但继续按下方向键,选中“鸭”时,onchange 事件被触发,也即:利用方向键进行选择时,当选中项由一个 optgroup 的选项换成另一 optgroup 的选项时,不会触发 onchange。
解决办法是:为下拉列表框增加 onkeydown 或 onkeyup 事件,和 onchange 一同协助解决此问题,这两个事件在 XHTML 1.0 中也是得到支持的。