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

最新推荐文章于 2021-06-03 14:13:31 发布

abxn2002

最新推荐文章于 2021-06-03 14:13:31 发布

阅读量717

点赞数

分类专栏： javascript学习笔记

javascript学习笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

转载地址: 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 οnlοad="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 οnclick="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" οnclick="fill_select1();"><br/><br/>

<select id="select2" name="select2"></select> 
<INPUT type="button" value="Populate with outerHTML" id="button2" name="button2" οnclick="fill_select2();"><br/><br/>

<select id="select3" name="select3"></select>
<input type="button" value="Populate with using createElement" id="button3" name="button3" οnclick="fill_select3();">

</body>
</html>