合理的使用optGroup元素，可以極大地增強select下拉清單框的表現能力。我是比較喜歡在select中使用optGroup做資料分類的，不過不知道微軟搞什麼飛機，就這麼一個html标簽bug還真是不少。剛才又在使用DOM操作select添加optGroup時發現了問題。
如下簡單的代碼，我們會得到什麼結果呢？
<select id="slt1">
</select>
<script language="javascript">
document.body.onload = function()
{
for ( var i=0 ; i < 3 ; ++i )
var group = document.createElement('OPTGROUP');
group.label = 'group 1-' + i;
slt1.add(group);
}
};
</script>
按我們對select的add方法的了解，似乎應該得到分組清單框：，但實際上我們得到的清單框卻是：。為什麼會是第二種情況呢
？那麼我們來看看IE DOM操作後生成的Html到底是什麼呢？
<SELECT id=slt1>
<OPTGROUP label="group 1-0">
<OPTGROUP label="group 1-2">
</OPTGROUP>
<OPTGROUP label="group 1-1">
</SELECT>
這是什麼東東啊？optGroup怎麼又嵌到optGroup裡面去了？optGroup不支援mutli-hierarhical呀！
原來我們必須改用通用的DOM操作方式，即使用appendChild(element)方法才能獲得正确的select清單的分組結構，示例代碼如下：
<select id="slt2">
for ( var i=0 ; i < 3 ; ++i )
var group = document.createElement('OPTGROUP');
group.label = 'group 2-' + i;
slt2.appendChild(group);
}
至于add方法的問題，隻能算作optGroup的又一個bug了
本文轉自部落格園鳥食軒的部落格，原文連結：http://www.cnblogs.com/birdshome/，如需轉載請自行聯系原部落客。