关于在IE下对Select标签设置innerHTML无效的问题
今天在做应用的时候有个级联菜单的功能，因为一般做开发的时候都是使用FireFox居多（原因不用多说，相信所有的前端开发人员都曾经尝到了恶心的IE不遵守W3C标准的痛苦），因此想当然的时候对一个Select标签进行了如下操作：
1.selectObj.innerHTML = '<option value="value">something</option>'
写完之后兴冲冲在FireFox下测试了一下功能，没问题，觉得OK！
第二天有个同事在测试的时候发现在IE下选什么都没有用，出不来子菜单，告诉我之后，着实把我郁闷了一番。在IE6下看了一把，貌似也没有报什么脚本错误，但就是innerHtML没有设置成功，因为之前没有遇到过这个问题，调了很久都没有找到原因。后来有IE Develop Toolbar看了一下生成之后的HTML结构，发现IE根本没有按照我规定的格式去渲染select标签，赶紧在Google上搜了一把，发现这是IE的一个BUG，微软的BUG申明中注明了两种解决方案：
1. 如果您必须使用 innerHTML ，一种替代方法是使用一个 div 对象封装 SELECT 元素和然后设置 div 对象的 innerHTML 属性。 例如：
1.<html>
2.<head>
3.<title>My Example</title>
4.<script language="Javascript">
5. var origDivHTML;
6.
7. function init() {
8. origDivHTML = myDiv.innerHTML;
9. }
10.
11. function setValues() {
12. var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML;
13. alert(oldinnerHTML);
14. yourDiv.innerHTML = origDivHTML;
15.
16. var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML;
17. alert(curinnerHTML);
18. }
19.</script>
20.</head>
21.
22.<body onload="init()">
23. <div id="myDiv">
24. <select name="firstSelect" size="1">
25. <option>11111</option>
26. <option>22222</option>
27. <option>33333</option>
28. </select>
29. </div>
30.
31. <div id="yourDiv">
32. <select name="secondSelect" size="1">
33. <option>aaaa</option>
34. <option>bbbb</option>
35. <option>cccc</option>
36. </select>
37. </div>
38. <button onclick="setValues();">click me to set the values</button>
39.</body>
40.</html>
41.
2. 理想情况下，应使用 选项(Option) 集合添加为 SELECT 元素的选项。 下面的代码显示用编程方式将选项添加到 SELECT 元素的三种方法。例如：
1.<html>
2.<head>
3.<title></title>
4.</head>
5.<body>
6.
7.<script>
8.
9.function fill_select1() {
10.
11. for(var i=0; i < 100; i++) {
12. select1.options[i] = new Option(i,i);
13. }
14.}
15.
16.function fill_select2() {
17.
18. var sOpts = "<select>";
19. for (var i = 0; i < 100; i++) {
20. sOpts += '<option value="' + i + '">' + i + '</option>';
21. }
22.
23. select2.outerHTML = sOpts + "</option>";
24.}
25.
26.function fill_select3() {
27.
28. for(var i=0; i < 100; i++) {
29. var oOption = document.createElement("OPTION");
30. oOption.text="Option: " + i;
31. oOption.value=i;
32. document.all.select3.add(oOption)
33. }
34.}
35.
36.</script>
37.
38.<h2>SELECT Box Population</h2>
39.
40.<select id=select1 name=select1></select>
41.<input type="button" value="Populate with options list" id="button1" name="button1" onclick="fill_select1();"><br/><br/>
42.
43.<select id="select2" name="select2"></select>
44.<INPUT type="button" value="Populate with outerHTML" id="button2" name="button2" onclick="fill_select2();"><br/><br/>
45.
46.<select id="select3" name="select3"></select>
47.<input type="button" value="Populate with using createElement" id="button3" name="button3" onclick="fill_select3();">
48.
49.</body>
50.</html>
51.
虽然这个BUG在GOOGLE上已经有不少人发表了看法，我还是觉得应该自己去写下来，总结加深印象，希望能给有需要的朋友提供帮助，少走一些弯路。
分享到：
相关推荐
前言： 这是一个老bug了，现在提供一个完美... bug描述： 在ie下面使用innerHTML来插入option选项的话，ie会去掉前面的，并拆分成多个节点，这样会造成select的出错，不是没有插进去，而是节点在转换时出问题了，微软对
标题中的"innerHtml（转）"可能是指HTML DOM（Document Object Model）中的一个属性`innerHTML`，这是一个非常关键的概念，特别是在JavaScript中用于处理HTML元素的内容。`innerHTML`允许我们获取或设置HTML元素内部...
本文实例讲述了js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法。分享给大家供大家参考。具体分析如下： 问题描述： 网站中使用了一个js插件，设置innerHTML时，在IE8下报错“未知运行时错误”： ...
在JavaScript中，`innerHTML`属性是一个非常常用的工具，用于设置或获取HTML元素的内部HTML内容。然而，有时候我们在使用`innerHTML`插入包含JavaScript代码的HTML时，会发现这些脚本并没有像预期那样执行。这个问题...
在实际项目中，可能由于设计风格、交互需求或者功能增强的需求，开发者会选择自定义select标签，以提供更灵活的解决方案。 自定义标签是Web Components规范的一部分，这个规范还包括Shadow DOM（用于封装组件样式和...
4. **避免不必要的innerHTML操作**：在可能的情况下，减少对`innerHTML`的依赖，转而使用DOM操作API，如`createElement`、`appendChild`和`removeChild`等，可以更好地控制DOM树的结构，避免这类问题。 5. **条件...
### 解决IE6环境下`select`元素的`title`属性无法正常显示的问题 在Web开发过程中，经常会遇到一些浏览器兼容性问题，特别是在处理老旧版本的Internet Explorer（IE）时更为明显。本文将针对一个特定的问题——如何...
其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格（Table）或选择列表（Select）的内容，但在IE6、7、8、9版本中，这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容，但在...
如果单适用 IE 浏览器，最简单的方式就是在 `<div>` 中的 `<script>` 标签中添加属性 `defer`，它可以通知 IE 该脚本需要异步解析。但是令人头痛的是 Firefox 的标准总是和 IE 有着各种各样的不同，由于 FF 不支持 `...
这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求，比如如果你是在一个p里加入包含的html代码，这是会出错的。所以如果你发现这些错误出现，尝试做两件事情： 1、...
值得注意的是，如果`<table>`元素没有`<tbody>`子元素，直接在IE6中对`table`使用`appendChild`方法是无效的，因为IE6不支持对`table`元素直接进行`appendChild`操作（IE8及以上版本已修复此问题）。在这种情况下，...
首先，问题的出现是这样的：在使用innerHTML向table或者tr元素动态插入内容时，如果在IE9及以下版本，会遇到“Invalid target element for this operation”（无效的目标元素用于此操作）的错误。例如，尝试通过以下...
在网页开发过程中，经常需要对页面中的元素进行动态操作，比如清除`<select>`下拉列表中的选项。本文将详细介绍如何使用JavaScript实现`select`清零，并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `...
当你尝试在IE中执行上述代码时，浏览器会报错，但错误信息可能不会明确指出问题出在innerHTML。为了解决这个问题，IE提供了innerText属性作为替代。innerText允许设置或获取元素的纯文本内容，而不是HTML。因此，...
这个Python教程-04-获取和设置标签内容(innerHTML)将详细解释这些库的使用方法，通过观看`python教程-0-04-获取和设置标签内容(innerHTML).ev4.mp4`视频，你可以得到更直观的演示和实例，帮助你更好地理解和掌握这些...
通过合理的DOM操作和事件监听，我们可以实现用户在选择上一级别时动态加载下一级别的选项，从而提供一个流畅的交互体验。这个过程中，JavaScript扮演了关键角色，它连接了HTML与服务器端的数据，实现了动态更新的...
标题中的“react-Innerself使用innerHTML将ReactRedux转换成50行代码”表明这是一个关于简化React和Redux集成的项目，它使用了一种叫做Innerself的技术。Innerself是一种轻量级的解决方案，通过innerHTML属性来实现...