关于在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上已经有不少人发表了看法，我还是觉得应该自己去写下来，总结加深印象，希望能给有需要的朋友提供帮助，少走一些弯路。
分享到：
相关推荐
其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格（Table）或选择列表（Select）的内容，但在IE6、7、8、9版本中，这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容，但在...
important`来优先应用CSS规则，这在IE中可能无效。此外，IE可以通过`document.formName.item("itemName")`或`document.formName.elements["elementName"]`访问表单元素，而Firefox仅支持后者。为了解决这个问题，...
给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 ps：该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr，克隆原来...
4. 考虑兼容性：确保这个功能在主流的浏览器上都能正常工作，包括Chrome、Firefox、Safari、Edge以及旧版本的IE。 5. 响应式设计：如果网站是响应式的，那么三级联动下拉列表也需要适应不同屏幕尺寸。可能需要调整...
2. `event.keyCode`：在JavaScript中，当键盘事件触发时，`event.keyCode`返回按下键的ASCII码。对于字母键A，其ASCII码是65，所以正确答案是a)65。 3. JavaScript数组方法：`sort()`、`concat()`和`reverse()`是...
在网页开发中，提供预览本地上传图片的功能是常见的需求，尤其在用户需要上传个人头像或产品图片等场景下。这个功能可以让用户在正式上传之前先查看所选图片的效果，确保图片符合预期。本文将详细讲解如何使用...
接下来，我们编写一个函数`checkXMLDocObj`来检查加载的XML文档是否有效，如果无效，则提示用户并跳转至首页： ```javascript function checkXMLDocObj(xmlFile) { var xmlDoc = loadXML(xmlFile); if (xmlDoc ==...
在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。 jQuery 代码: $("<div><p>Hello</p>...