关于在IE下对Select标签设置innerHTML无效的问题
来源:互联网 发布:中国房地产泡沫知乎 编辑:程序博客网 时间:2024/05/31 19:43
关于在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 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>
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" 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>
- 关于在IE下对Select标签设置innerHTML无效的问题
- 关于在IE下对Select标签设置innerHTML无效的问题
- 关于在IE下对Select标签设置innerHTML无效的问题
- 关于在IE下对Select标签设置innerHTML无效的问题
- IE下对select标签的innerHTML支持问题
- 解决IE下select innerHTML无效的问题
- IE下JS使用innerHTML对table动态添加无效的原因
- 使用bBank.js解决IE下select标签innerHTML插入option的BUG
- IE中关于innerHTML的问题
- JQuery<Select>在IE下设置选中问题
- 关于jquery $符号在IE下无效的解决办法
- 关于jquery $符号在IE下无效的解决办法
- IE下修改<p>标签的innerHTML出错
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- IE下css设置select的诸多问题
- B/S下Domino视图数据导出到Excel的代码
- 看看章爷的脚本
- ip攻击 百度
- 重装win7后无法启动fedora
- C语言实现链队列
- 关于在IE下对Select标签设置innerHTML无效的问题
- oracle 一些优化设计原则
- Convert a byte array to a Hex string
- .Net开发人员常犯的6大安全错误
- 出现“Xcode could not find a valid private-key/...”一种解决办法
- flex的事件旅程
- java_colletction应用:从hashmap到array的转换
- 我的第一篇博客
- Oracle OCM 认证指南