JavaScript操作optgroup的Bug-白红宇

JavaScript操作optgroup的Bug

阅读量：5310 次

发布时间：2019-06-14

本文共 2050 字，大约阅读时间需要 6 分钟。

在 html里,optgroup这个元素对于我来说很少用到。最近在公司做项目时使用了一下，感觉不错，可以对数据进行分类。但在使用JavaScript 添加optgroup时,在IE与Firefox下分别出现了不同的Bug。为了今后再遇到这问题，发到这里作为备忘用。

我们先看以下代码：

window.onload = function () {

var selObj = document.getElementById('demo');

var optionGroupObj = document.createElement('optgroup');

optionGroupObj.label = 'optionGroup';

selObj.appendChild(optionGroupObj);

var optionObj = new Option('optionText','optionValue');

selObj.options[selObj.options.length] = optionObj;

}

<select id="demo">

<option value="-1">please select</option>

</select>

在IE下显示的结构是：

<SELECT id=demo>

<OPTION value=-1 selected>please select</OPTION>

<OPTGROUP label=optionGroup>

<OPTION value=optionValue>optionText</OPTION>

</OPTGROUP>

</SELECT>

而在Firefox下显示的结构却是：

<select id="demo">

<option value="-1">please select</option>

<optgroup label="optionGroup"/>

<option value="optionValue">optionText</option>

</select>

从这段代码看起来，没有任何问题。在IE下，把optgroup作为option父结点，这是正确的。而Firefox却把optgroup作为option的兄弟结点，这显然不是我们所要的结果。

于是，又尝试着用标准DOM的操作方式进行改写。

将第7行代码改成“optionGroupObj.appendChild(optionObj);”

在IE下显示的结构是：

<SELECT id=demo>

<OPTION value=-1 selected>please select</OPTION>

<OPTGROUP label=optionGroup>

<OPTION value=optionValue></OPTION>

</OPTGROUP>

</SELECT>

Firefox正常了。但在IE下，在option元素却没有’optionText’显示文本。

最后，改写成如下代码，解决了这个Bug。

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>optgroup Bug</title>

<script type="text/javascript">

window.onload = function (){

var selObj = document.getElementById('demo');

var optionGroupObj = document.createElement('optgroup');

optionGroupObj.label = 'optionGroup';

selObj.appendChild(optionGroupObj);

var optionObj = new Option();

optionObj.value = 'optionValue';

optionObj.innerHTML = 'optionText';

optionGroupObj.appendChild(optionObj);

}

</script>

</head>

<body>

<select id="demo">

<option value="-1">please select</option>

</select>

</body>

</html>

转载于:https://www.cnblogs.com/top5/archive/2011/09/02/2164094.html

你可能感兴趣的文章

读阿里巴巴Java开发手册v1.2.0之编程规约有感【架构篇】

git报错：failed to push some refs to 'git@github.com:JiangXiaoLiang1988/CustomerHandl

查看>>

Eureka高可用，节点均出现在unavailable-replicas下

查看>>

day 21 - 1 包，异常处理

查看>>

机器学习等知识--- map/reduce, python 读json数据。。。

查看>>

字符串编码

查看>>

预编译语句(Prepared Statements)介绍，以MySQL为例

查看>>

Noip2011提高组总结

查看>>

HDU 4416 Good Article Good sentence（后缀自动机）

查看>>

Java异常之try，catch，finally，throw，throws

查看>>

spring的配置文件详解

查看>>

Spring框架第一篇之Spring的第一个程序

SQL-android uri的使用(转载)

查看>>

数字pid笔记（1）

查看>>