IE6使用add方法添加optGroup的bug

    合理的使用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" >
         </ OPTGROUP >
</ SELECT >

    这是什么东东啊？optGroup怎么又嵌到optGroup里面去了？optGroup不支持mutli-hierarhical呀！

    原来我们必须改用通用的DOM操作方式，即使用appendChild(element)方法才能获得正确的select列表的分组结构，示例代码如下：

< select  id ="slt2" >
</ select >
< script  language ="javascript" >
document.body.onload = function()
{
   for ( var i=0 ; i < 3 ; ++i )
   {
       var group = document.createElement('OPTGROUP');
       group.label = 'group 2-' + i;
       slt2.appendChild(group);
   }
};   
</ script >

    至于add方法的问题，只能算作optGroup的又一个bug了:(

    相关文章： 在使用optgroup时遇到的缺陷与修复