JavaScript操作optgroup的Bug

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

我们先看以下代码：

  1. window.onload = function () {
  2. var selObj = document.getElementById('demo');
  3. var optionGroupObj = document.createElement('optgroup');
  4. optionGroupObj.label = 'optionGroup';
  5. selObj.appendChild(optionGroupObj);
  6. var optionObj = new Option('optionText','optionValue');
  7. selObj.options[selObj.options.length] = optionObj;
  8. }
  10. <select id="demo">
  11. <option value="-1">please select</option>
  12. </select>

在IE下显示的结构是：

  1. <SELECT id=demo>
  2. <OPTION value=-1 selected>please select</OPTION>
  3. <OPTGROUP label=optionGroup>
  4. <OPTION value=optionValue>optionText</OPTION>
  5. </OPTGROUP>
  6. </SELECT>

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

  1. <select id="demo">
  2. <option value="-1">please select</option>
  3. <optgroup label="optionGroup"/>
  4. <option value="optionValue">optionText</option>
  5. </select>

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

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

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

在IE下显示的结构是：

  1. <SELECT id=demo>
  2. <OPTION value=-1 selected>please select</OPTION>
  3. <OPTGROUP label=optionGroup>
  4. <OPTION value=optionValue></OPTION>
  5. </OPTGROUP>
  6. </SELECT>

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

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

完整代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>optgroup Bug</title>
  6. <script type="text/javascript">
  7. window.onload = function (){
  8. var selObj = document.getElementById('demo');
  9. var optionGroupObj = document.createElement('optgroup');
  10. optionGroupObj.label = 'optionGroup';
  11. selObj.appendChild(optionGroupObj);
  12. var optionObj = new Option();
  13. optionObj.value = 'optionValue';
  14. optionObj.innerHTML = 'optionText';
  15. optionGroupObj.appendChild(optionObj);
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <select id="demo">
  21. <option value="-1">please select</option>
  22. </select>
  23. </body>
  24. </html>
posted @ 2011-09-02 18:55  与时俱进  阅读(1547)  评论(0)  编辑  收藏  举报
友情链接：同里老宅院民居客栈