关于在IE下对Select标签设置innerHTML无效的问题
来源:互联网 发布:如何查看网络是否通畅 编辑:程序博客网 时间:2024/04/29 15:15
今天在做应用的时候有个级联菜单的功能,因为一般做开发的时候都是使用FireFox居多(原因不用多说,相信所有的前端开发人员都曾经尝到了恶心的IE不遵守W3C标准的痛苦),因此想当然的时候对一个Select标签进行了如下操作:
写完之后兴冲冲在FireFox下测试了一下功能,没问题,觉得OK!
第二天有个同事在测试的时候发现在IE下选什么都没有用,出不来子菜单,告诉我之后,着实把我郁闷了一番。在IE6下看了一把,貌似也没有报什么脚本错误,但就是innerHtML没有设置成功,因为之前没有遇到过这个问题,调了很久都没有找到原因。后来有IE Develop Toolbar看了一下生成之后的HTML结构,发现IE根本没有按照我规定的格式去渲染select标签,赶紧在Google上搜了一把,发现这是IE的一个BUG,微软的BUG申明中注明了两种解决方案:
1. 如果您必须使用 innerHTML ,一种替代方法是使用一个 div 对象封装 SELECT 元素和然后设置 div 对象的 innerHTML 属性。 例如:
2. 理想情况下,应使用 选项(Option) 集合添加为 SELECT 元素的选项。 下面的代码显示用编程方式将选项添加到 SELECT 元素的三种方法。例如:
虽然这个BUG在GOOGLE上已经有不少人发表了看法,我还是觉得应该自己去写下来,总结加深印象,希望能给有需要的朋友提供帮助,少走一些弯路。
- selectObj.innerHTML = '<option value="value">something</option>'
第二天有个同事在测试的时候发现在IE下选什么都没有用,出不来子菜单,告诉我之后,着实把我郁闷了一番。在IE6下看了一把,貌似也没有报什么脚本错误,但就是innerHtML没有设置成功,因为之前没有遇到过这个问题,调了很久都没有找到原因。后来有IE Develop Toolbar看了一下生成之后的HTML结构,发现IE根本没有按照我规定的格式去渲染select标签,赶紧在Google上搜了一把,发现这是IE的一个BUG,微软的BUG申明中注明了两种解决方案:
1. 如果您必须使用 innerHTML ,一种替代方法是使用一个 div 对象封装 SELECT 元素和然后设置 div 对象的 innerHTML 属性。 例如:
- <html>
- <head>
- <title>My Example</title>
- <script language="Javascript">
- var origDivHTML;
- function init() {
- origDivHTML = myDiv.innerHTML;
- }
- function setValues() {
- var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML;
- alert(oldinnerHTML);
- yourDiv.innerHTML = origDivHTML;
- var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML;
- alert(curinnerHTML);
- }
- </script>
- </head>
- <body onload="init()">
- <div id="myDiv">
- <select name="firstSelect" size="1">
- <option>11111</option>
- <option>22222</option>
- <option>33333</option>
- </select>
- </div>
- <div id="yourDiv">
- <select name="secondSelect" size="1">
- <option>aaaa</option>
- <option>bbbb</option>
- <option>cccc</option>
- </select>
- </div>
- <button onclick="setValues();">click me to set the values</button>
- </body>
- </html>
2. 理想情况下,应使用 选项(Option) 集合添加为 SELECT 元素的选项。 下面的代码显示用编程方式将选项添加到 SELECT 元素的三种方法。例如:
- <html>
- <head>
- <title></title>
- </head>
- <body>
- <script>
- function fill_select1() {
- for(var i=0; i < 100; i++) {
- select1.options[i] = new Option(i,i);
- }
- }
- function fill_select2() {
- var sOpts = "<select>";
- for (var i = 0; i < 100; i++) {
- sOpts += '<option value="' + i + '">' + i + '</option>';
- }
- select2.outerHTML = sOpts + "</option>";
- }
- function fill_select3() {
- for(var i=0; i < 100; i++) {
- var oOption = document.createElement("OPTION");
- oOption.text="Option: " + i;
- oOption.value=i;
- document.all.select3.add(oOption)
- }
- }
- </script>
- <h2>SELECT Box Population</h2>
- <select id=select1 name=select1></select>
- <input type="button" value="Populate with options list" id="button1" name="button1"onclick="fill_select1();"><br/><br/>
- <select id="select2" name="select2"></select>
- <INPUT type="button" value="Populate with outerHTML" id="button2" name="button2"onclick="fill_select2();"><br/><br/>
- <select id="select3" name="select3"></select>
- <input type="button" value="Populate with using createElement" id="button3"name="button3" onclick="fill_select3();">
- </body>
- </html>
虽然这个BUG在GOOGLE上已经有不少人发表了看法,我还是觉得应该自己去写下来,总结加深印象,希望能给有需要的朋友提供帮助,少走一些弯路。
- 关于在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的诸多问题
- Oracle高级应用之合并MERGE
- http tcp/ip 和socket的区别
- ios如何判断当前网络的运营商
- HDU 1045 fire net【二分匹配或者DFS】
- 原码、反码、补码【转】
- 关于在IE下对Select标签设置innerHTML无效的问题
- T-SQL查询高级--理解SQL SERVER中非聚集索引的覆盖,连接,交叉和过滤
- 万能驱动 32位,64位最新版 电脑万能驱动
- 最强暴兵流
- T-SQL中的GROUP BY GROUPING SETS
- Android开发之多线程的操作方式Thread,TimerTask,AsyncTask
- GeoServer地图开发解决方案(一):环境搭建篇
- 不要自称为程序员
- Oracle高级应用之物化视图(materialized view)