IE6使用add方法添加optGroup的bug

合理的使用optGroup元素,可以极大地增强select下拉列表框的表现能力。我是比较喜欢在select中使用optGroup做数据分类的,不过不知道微软搞什么飞机,就这么一个html标签bug还真是不少。刚才又在使用DOM操作select添加optGroup时发现了问题。

    如下简单的代码,我们会得到什么结果呢?
IE6使用add方法添加optGroup的bug<select id="slt1">
IE6使用add方法添加optGroup的bug</select>
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug<script language="javascript">IE6使用add方法添加optGroup的bug
IE6使用add方法添加optGroup的bugdocument.body.onload 
= function()
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug
IE6使用add方法添加optGroup的bug{
IE6使用add方法添加optGroup的bug    
for ( var i=0 ; i < 3 ; ++i )
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug    
IE6使用add方法添加optGroup的bug{
IE6使用add方法添加optGroup的bug        
var group = document.createElement('OPTGROUP');
IE6使用add方法添加optGroup的bug        group.label 
= 'group 1-+ i;  
IE6使用add方法添加optGroup的bug        slt1.add(group);
IE6使用add方法添加optGroup的bug    }

IE6使用add方法添加optGroup的bug}
;   
IE6使用add方法添加optGroup的bug
</script>

    按我们对select的add方法的理解,似乎应该得到分组列表框:,但实际上我们得到的列表框却是:。为什么会是第二种情况呢IE6使用add方法添加optGroup的bug?那么我们来看看IE DOM操作后生成的Html到底是什么呢?
IE6使用add方法添加optGroup的bug<SELECT id=slt1>
IE6使用add方法添加optGroup的bug    <OPTGROUP label="group 1-0">
IE6使用add方法添加optGroup的bug        <OPTGROUP label="group 1-2">
IE6使用add方法添加optGroup的bug        </OPTGROUP>
IE6使用add方法添加optGroup的bug        <OPTGROUP label="group 1-1">
IE6使用add方法添加optGroup的bug        </OPTGROUP>
IE6使用add方法添加optGroup的bug</SELECT>

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

    原来我们必须改用通用的DOM操作方式,即使用appendChild(element)方法才能获得正确的select列表的分组结构,示例代码如下:
IE6使用add方法添加optGroup的bug<select id="slt2">
IE6使用add方法添加optGroup的bug</select>
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug<script language="javascript">IE6使用add方法添加optGroup的bug
IE6使用add方法添加optGroup的bugdocument.body.onload 
= function()
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug
IE6使用add方法添加optGroup的bug{
IE6使用add方法添加optGroup的bug   
for ( var i=0 ; i < 3 ; ++i )
IE6使用add方法添加optGroup的bugIE6使用add方法添加optGroup的bug   
IE6使用add方法添加optGroup的bug{
IE6使用add方法添加optGroup的bug       
var group = document.createElement('OPTGROUP');
IE6使用add方法添加optGroup的bug       group.label 
= 'group 2-+ i;
IE6使用add方法添加optGroup的bug       slt2.appendChild(group);
IE6使用add方法添加optGroup的bug   }

IE6使用add方法添加optGroup的bug}
;   
IE6使用add方法添加optGroup的bug
</script>

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

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

上一篇:CentOS8安装fastdfs6.06


下一篇:Java入门系列-25-NIO(实现非阻塞网络通信)