[转贴]IE6使用add方法添加optGroup的bug - Web开发

论坛首页 » Java,C/C++,Shell,Php,Web 交流区 » Web开发 » [转贴]IE6使用add方法添加optGroup的bug

统计：回贴：0 阅读：126 最后更新：2007-03-29 00:00

标题： [转贴]IE6使用add方法添加optGroup的bug 上一主题下一主题

iwlk

头衔：灭天使者
等级：一级用户
精华：40
帖子：41 / 26
积分：0

在线时间：2143分
注册时间：2007-01-01 00:00
最后登录：2008-01-19 15:27

鲜花(23) 鸡蛋(33)

[转贴]IE6使用add方法添加optGroup的bug

转:http://www.cnblogs.com/birdshome/archive/2006/02/20/OptGroup.html
 
合理的使用optGroup元素，可以极大地增强select下拉列表框的表现能力。我是比较喜欢在select中使用optGroup做数据分类的，不过不知道微软搞什么飞机，就这么一个html标签bug还真是不少。刚才又在使用DOM操作select添加optGroup时发现了问题。 如下简单的代码，我们会得到什么结果呢？
<DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="/Images/OutliningIndicators/None.gif" align=top><select id="slt1"> <IMG src="/Images/OutliningIndicators/None.gif" align=top></select> <IMG id=Codehighlighter1_59_268_Open_Image onclick="this.style.display='none'; Codehighlighter1_59_268_Open_Text.style.display='none'; Codehighlighter1_59_268_Closed_Image.style.display='inline'; Codehighlighter1_59_268_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align=top><IMG id=Codehighlighter1_59_268_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_59_268_Closed_Text.style.display='none'; Codehighlighter1_59_268_Open_Image.style.display='inline'; Codehighlighter1_59_268_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedBlock.gif" align=top><script language="javascript"><SPAN id=Codehighlighter1_59_268_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif"> <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top>document.body.onload = function() <IMG id=Codehighlighter1_94_263_Open_Image onclick="this.style.display='none'; Codehighlighter1_94_263_Open_Text.style.display='none'; Codehighlighter1_94_263_Closed_Image.style.display='inline'; Codehighlighter1_94_263_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align=top><IMG id=Codehighlighter1_94_263_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_94_263_Closed_Text.style.display='none'; Codehighlighter1_94_263_Open_Image.style.display='inline'; Codehighlighter1_94_263_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align=top><SPAN id=Codehighlighter1_94_263_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif">{ <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> for ( var i=0 ; i < 3 ; ++i ) <IMG id=Codehighlighter1_134_261_Open_Image onclick="this.style.display='none'; Codehighlighter1_134_261_Open_Text.style.display='none'; Codehighlighter1_134_261_Closed_Image.style.display='inline'; Codehighlighter1_134_261_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align=top><IMG id=Codehighlighter1_134_261_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_134_261_Closed_Text.style.display='none'; Codehighlighter1_134_261_Open_Image.style.display='inline'; Codehighlighter1_134_261_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align=top> <SPAN id=Codehighlighter1_134_261_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif">{ <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> var group = document.createElement('OPTGROUP'); <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> group.label = 'group 1-' + i; <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> slt1.add(group); <IMG src="/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align=top> } <IMG src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align=top>}; <IMG src="/Images/OutliningIndicators/None.gif" align=top></script></DIV> 按我们对select的add方法的理解，似乎应该得到分组列表框：<SELECT id=slt2><OPTGROUP label="group 1-0"></OPTGROUP><OPTGROUP label="group 1-1"></OPTGROUP><OPTGROUP label="group 1-2"></OPTGROUP></SELECT>，但实际上我们得到的列表框却是：<SELECT id=slt1><OPTGROUP label="group 1-0"></OPTGROUP></SELECT>。为什么会是第二种情况呢<IMG height=20 src="http://www.cnblogs.com/Emoticons/hitwall.gif" width=25 border=0>？那么我们来看看IE DOM操作后生成的Html到底是什么呢？
<DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="/Images/OutliningIndicators/None.gif" align=top><SELECT id=slt1> <IMG src="/Images/OutliningIndicators/None.gif" align=top> <OPTGROUP label="group 1-0"> <IMG src="/Images/OutliningIndicators/None.gif" align=top> <OPTGROUP label="group 1-2"> <IMG src="/Images/OutliningIndicators/None.gif" align=top> </OPTGROUP> <IMG src="/Images/OutliningIndicators/None.gif" align=top> <OPTGROUP label="group 1-1"> <IMG src="/Images/OutliningIndicators/None.gif" align=top> </OPTGROUP> <IMG src="/Images/OutliningIndicators/None.gif" align=top></SELECT></DIV> 这是什么东东啊？optGroup怎么又嵌到optGroup里面去了？optGroup不支持mutli-hierarhical呀！ 原来我们必须改用通用的DOM操作方式，即使用appendChild(element)方法才能获得正确的select列表的分组结构，示例代码如下：
<DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="/Images/OutliningIndicators/None.gif" align=top><select id="slt2"> <IMG src="/Images/OutliningIndicators/None.gif" align=top></select> <IMG id=Codehighlighter1_59_268_Open_Image onclick="this.style.display='none'; Codehighlighter1_59_268_Open_Text.style.display='none'; Codehighlighter1_59_268_Closed_Image.style.display='inline'; Codehighlighter1_59_268_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align=top><IMG id=Codehighlighter1_59_268_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_59_268_Closed_Text.style.display='none'; Codehighlighter1_59_268_Open_Image.style.display='inline'; Codehighlighter1_59_268_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedBlock.gif" align=top><script language="javascript"><SPAN id=Codehighlighter1_59_268_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif"> <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top>document.body.onload = function() <IMG id=Codehighlighter1_94_263_Open_Image onclick="this.style.display='none'; Codehighlighter1_94_263_Open_Text.style.display='none'; Codehighlighter1_94_263_Closed_Image.style.display='inline'; Codehighlighter1_94_263_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align=top><IMG id=Codehighlighter1_94_263_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_94_263_Closed_Text.style.display='none'; Codehighlighter1_94_263_Open_Image.style.display='inline'; Codehighlighter1_94_263_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align=top><SPAN id=Codehighlighter1_94_263_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif">{ <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> for ( var i=0 ; i < 3 ; ++i ) <IMG id=Codehighlighter1_132_261_Open_Image onclick="this.style.display='none'; Codehighlighter1_132_261_Open_Text.style.display='none'; Codehighlighter1_132_261_Closed_Image.style.display='inline'; Codehighlighter1_132_261_Closed_Text.style.display='inline';" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align=top><IMG id=Codehighlighter1_132_261_Closed_Image style="DISPLAY: none" onclick="this.style.display='none'; Codehighlighter1_132_261_Closed_Text.style.display='none'; Codehighlighter1_132_261_Open_Image.style.display='inline'; Codehighlighter1_132_261_Open_Text.style.display='inline';" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align=top> <SPAN id=Codehighlighter1_132_261_Closed_Text style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; DISPLAY: none; BORDER-LEFT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BACKGROUND-COLOR: #ffffff"><IMG src="http://www.cnblogs.com/Images/dot.gif">{ <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> var group = document.createElement('OPTGROUP'); <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> group.label = 'group 2-' + i; <IMG src="/Images/OutliningIndicators/InBlock.gif" align=top> slt2.appendChild(group); <IMG src="/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align=top> } <IMG src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align=top>}; <IMG src="/Images/OutliningIndicators/None.gif" align=top></script></DIV> 至于add方法的问题，只能算作optGroup的又一个bug了:( 

搜索更多相关主题的帖子:

发表于：2007-03-29 14:58