注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{'coding': 'life'}

          I want to be a geek

 
 
 

日志

 
 
 
 

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

2010-12-20 22:08:36|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这是csdn上的文章,我也碰到了,好友推荐的,为了方便就拷过来 了
原址:http://blog.csdn.net/grubbyfan/archive/2009/01/09/3743344.aspx
 今天在做应用的时候有个级联菜单的功能,因为一般做开发的时候都是使用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上已经有不少人发表了看法,我还是觉得应该自己去写下来,总结加深印象,希望能给有需要的朋友提供帮助,少走一些弯路。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/grubbyfan/archive/2009/01/09/3743344.aspx
  评论这张
 
阅读(271)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018