optgroup

作者:chilleen 来源:ITPOW(原创) 日期:2006-12-20

在下拉列表框(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>

效果如下:

optgroup.jpg

  • 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 中也是得到支持的。

相关文章