关于在IE下对Select标签设置innerHTML无效的问题

最新推荐文章于 2015-01-04 17:35:25 发布

风中叶

最新推荐文章于 2015-01-04 17:35:25 发布

阅读量4.6k

点赞数 1

分类专栏： JavaScript 文章标签： ie button firefox 前端开发 function div

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

关于在IE下对Select标签设置innerHTML无效的问题今天在做应用的时候有个级联菜单的功能，因为一般做开发的时候都是使用FireFox居多（原因不用多说，相信所有的前端开发人员都曾经尝到了恶心的IE不遵守W3C标准的痛苦），因此想当然的时候对一个Select标签进行了如下操作：1.selectObj.innerHTML = 'something'写完之后兴冲冲在FireFox下测试了一下功能，没问题，觉得OK！第二天有个同事在测试的时候发现在IE下选什么都没有用，出不来子菜单，告诉我之后，着实把我郁闷了一番。在IE6下看了一把，貌似也没有报什么脚本错误，但就是innerHtML没有设置成功，因为之前没有遇到过这个问题，调了很久都没有找到原因。后来有IE Develop Toolbar看了一下生成之后的HTML结构，发现IE根本没有按照我规定的格式去渲染select标签，赶紧在Google上搜了一把，发现这是IE的一个BUG，

微软的BUG申明中注明了两种解决方案：1. 如果您必须使用 innerHTML ，一种替代方法是使用一个 div 对象封装 SELECT 元素和然后设置 div 对象的 innerHTML 属性。例如：1.2.21.22.23.

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 οnlοad="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 οnclick="setValues();">click me to set the values</button>
39.</body>
40.</html>

SELECT Box Population

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" οnclick="fill_select1();"><br/><br/>
42.

43.<select id="select2" name="select2"></select> 
44.<INPUT type="button" value="Populate with outerHTML" id="button2" name="button2" οnclick="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" οnclick="fill_select3();">
48.

49.</body>
50.</html>

风中叶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
关于在IE下对Select标签设置innerHTML无效的问题

关于在IE下对Select标签设置innerHTML无效的问题今天在做应用的时候有个级联菜单的功能，因为一般做开发的时候都是使用FireFox居多（原因不用多说，相信所有的前端开发人员都曾经尝到了恶心的IE不遵守W3C标准的痛苦），因此想当然的时候对一个Select标签进行了如
复制链接

扫一扫

专栏目录