在 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>