Select the product you need help with

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

Article ID: 276228

Retired KB Content Disclaimer

This article was previously published under Q276228

Expand all | Collapse all

SYMPTOMS

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

Back to the top | Give Feedback

RESOLUTION

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:

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

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:

<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>\n';
		}
	
		select2.outerHTML = sOpts  + "</SELECT>";
}

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>

Back to the top | Give Feedback

STATUS

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

Back to the top | Give Feedback

MORE INFORMATION

Steps to Reproduce Behavior

The following sample code illustrates this bug:

<html>
<head>
<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.");
    else
        alert("Test failed: innerHTML = " + strNewHTML );
}
</script>
</head>
<body>
  <select id="idSelect">
    <option value="line1">Option 1</option>
    <option value="line2">Option 2</option>
  </select>
  <input type="button" value="test" onClick="test()" />
</body>
</html>

Back to the top | Give Feedback

REFERENCES

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

Select-Object

(http://technet.microsoft.com/en-us/library/dd315291.aspx)

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

Options Collection

(http://msdn.microsoft.com/en-us/library/ms537472(v=vs.85).aspx)

Back to the top | Give Feedback

Properties

Article ID: 276228 - Last Review: May 17, 2012 - Revision: 4.0

kbbug kbdhtml kbnofix KB276228

Retired KB Content Disclaimer

This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

Back to the top | Give Feedback