关于在IE下对Select标签设置innerHTML无效的问题
今天在做应用的时候有个级联菜单的功能，因为一般做开发的时候都是使用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
