BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

만료된 KB 콘텐츠 고지 사항

이 문서는 Microsoft에서 더 이상 지원하지 않는 제품에 대해 작성되었습니다. 따라서 이 문서는 “있는 그대로" 제공되며 더 이상 업데이트되지 않습니다.


When you set the innerHTML property of the Select object, the changes do not take effect correctly.


If you must use innerHTML, a workaround is to use a Div object to wrap the SELECT element and then set the innerHTML property for the Div object. For example:

<title>My Example</title>
<script language="Javascript">
var origDivHTML;

function init()
origDivHTML = myDiv.innerHTML;

function setValues()
var oldinnerHTML = "your original innerHTML: " + yourDiv.innerHTML ;
yourDiv.innerHTML = origDivHTML;

var curinnerHTML = "your current innerHTML: " + yourDiv.innerHTML ;

<body onload="init()">

<div id="myDiv">
<select name="firstSelect" size="1" >

<div id="yourDiv">
<select name="secondSelect" size="1" >
<button onclick = "setValues();">click me to set the values</button>

Ideally, you should use the options collection to add the options of a SELECT element. The following code shows three ways to programmatically add options to the SELECT element:



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>\n';

select2.outerHTML = sOpts + "</SELECT>";

function fill_select3() {

for(var i=0; i < 100; i++) {
var oOption = document.createElement("OPTION");
oOption.text="Option: " + i;


<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();">



Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

More Information

Steps to Reproduce Behavior

The following sample code illustrates this bug:
<script language="JavaScript">
function test()
var objSelect = document.all.idSelect;
var strOrigHTML = objSelect.innerHTML;
objSelect.innerHTML = strOrigHTML;
var strNewHTML = objSelect.innerHTML;

if (strNewHTML == strOrigHTML)
alert("Test passed.");
alert("Test failed: innerHTML = " + strNewHTML );
<select id="idSelect">
<option value="line1">Option 1</option>
<option value="line2">Option 2</option>
<input type="button" value="test" onClick="test()" />


For more information on the Select object, see the following article on the Microsoft Developer Network (MSDN):

For more information on the options collection, see the following article on MSDN:


문서 ID: 276228 - 마지막 검토: 2012. 5. 17. - 수정: 1