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

来源：互联网发布：java设计模式pdf下载编辑：程序博客网时间：2024/05/15 08:22

转载地址: http://blog.csdn.net/grubbyfan/article/details/3743344

这是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>