合理的使用optGroup元素,可以极大地增强select下拉列表框的表现能力。我是比较喜欢在select中使用optGroup做数据分类的,不过不知道微软搞什么飞机,就这么一个html标签bug还真是不少。刚才又在使用DOM操作select添加optGroup时发现了问题。
如下简单的代码,我们会得到什么结果呢?
<
select
id
="slt1"
>
</
select
>
<
script
language
="javascript"
>
document.body.onload
=
function
()
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
for
(
var
i
=
0
; i
<
3
;
++
i )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
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
()
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
for
(
var
i
=
0
; i
<
3
;
++
i )
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
var
group
=
document.createElement('OPTGROUP');
group.label
=
'group
2
-
'
+
i;
slt2.appendChild(group);
}
}
;
</
script
>
如下简单的代码,我们会得到什么结果呢?
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![ContractedSubBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![ContractedSubBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockEnd.gif](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![ExpandedBlockEnd.gif](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
按我们对select的add方法的理解,似乎应该得到分组列表框:,但实际上我们得到的列表框却是:。为什么会是第二种情况呢
![hitwall.gif](https://www.cnblogs.com/Emoticons/hitwall.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
这是什么东东啊?optGroup怎么又嵌到optGroup里面去了?optGroup不支持mutli-hierarhical呀!
原来我们必须改用通用的DOM操作方式,即使用appendChild(element)方法才能获得正确的select列表的分组结构,示例代码如下:
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![ContractedSubBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![ContractedSubBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![InBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![ExpandedSubBlockEnd.gif](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![ExpandedBlockEnd.gif](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
至于add方法的问题,只能算作optGroup的又一个bug了
本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。