合理的使用optGroup元素,可以极大地增强select下拉列表框的表现能力。我是比较喜欢在select中使用optGroup做数据分类的,不过不知道微软搞什么飞机,就这么一个html标签bug还真是不少。刚才又在使用DOM操作select添加optGroup时发现了问题。
如下简单的代码,我们会得到什么结果呢?
按我们对select的add方法的理解,似乎应该得到分组列表框: ,但实际上我们得到的列表框却是: 。为什么会是第二种情况呢 ?那么我们来看看IE DOM操作后生成的Html到底是什么呢?
这是什么东东啊?optGroup怎么又嵌到optGroup里面去了?optGroup不支持mutli-hierarhical呀!
原来我们必须改用通用的DOM操作方式,即使用appendChild(element)方法才能获得正确的select列表的分组结构,示例代码如下:
如下简单的代码,我们会得到什么结果呢?
<
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 >
< 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 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 >
</ 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了
本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。