ice world

There is nothing too difficult if you put your heart into it.
posts - 104, comments - 103, trackbacks - 0, articles - 0

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

Posted on 2011-04-16 02:01 IceWee 阅读(391) 评论(0)  编辑  收藏 所属分类: Javascript
今天在做应用的时候有个级联菜单的功能,因为一般做开发的时候都是使用FireFox居多(原因不用多说,相信所有的前端开发人员都曾经尝到了恶心的IE不遵守W3C标准的痛苦),因此想当然的时候对一个Select标签进行了如下操作: 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 属性。 例如:

<html>
<head>
<title>My Example</title>
<script type="text/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>Example</title>
<script type="text/javascript">
<!--
    
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>
</head>
<body>
    
<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上已经有不少人发表了看法,我还是觉得应该自己去写下来,总结加深印象,希望能给有需要的朋友提供帮助,少走一些弯路。

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/grubbyfan/archive/2009/01/09/3743344.aspx


只有注册用户登录后才能发表评论。


网站导航: