Microsoft KB Archive/276228

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

Article ID: 276228

Article Last Modified on 5/12/2003

-

APPLIES TO


 * Microsoft Internet Explorer 5.0
 * Microsoft Internet Explorer 5.01
 * Microsoft Internet Explorer (Programming) 5.01 SP1
 * Microsoft Internet Explorer 5.5

-



This article was previously published under Q276228



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



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: My Example  var origDivHTML;

function init {  origDivHTML = myDiv.innerHTML; }

function setValues {  var oldinnerHTML = &quot;your original innerHTML: &quot; + yourDiv.innerHTML ; alert(oldinnerHTML); yourDiv.innerHTML = origDivHTML; var curinnerHTML = &quot;your current innerHTML: &quot; + yourDiv.innerHTML ; alert(curinnerHTML); }



  11111    22222     33333

  aaaa bbbb cccc click me to set the values

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 = &quot;<SELECT>&quot;; for (var i=0;i<100;i++) {           sOpts += '<OPTION VALUE=&quot;' + i + '&quot;>' + i + '</OPTION>\n'; }       select2.outerHTML = sOpts  + &quot;</SELECT>&quot;; }

function fill_select3 {

for(var i=0; i < 100; i++) { var oOption = document.createElement(&quot;OPTION&quot;); oOption.text=&quot;Option: &quot; + i;           oOption.value=i; document.all.select3.add(oOption) } }

<H2>SELECT Box Population</H2>

<SELECT id=select1 name=select1></SELECT> <INPUT type=&quot;button&quot; value=&quot;Populate with options list&quot; id=button1 name=button1 onclick=&quot;fill_select1;&quot;><BR><BR> <SELECT id=select2 name=select2></SELECT> <INPUT type=&quot;button&quot; value=&quot;Populate with outerHTML&quot; id=button2 name=button2 onclick=&quot;fill_select2;&quot;><BR><BR> <SELECT id=select3 name=select3></SELECT> <INPUT type=&quot;button&quot; value=&quot;Populate with using createElement&quot; id=button3 name=button3 onclick=&quot;fill_select3;&quot;>

</BODY> </HTML>

<div class="status_section">

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

<div class="moreinformation_section">

Steps to Reproduce Behavior
The following sample code illustrates this bug: <script language=&quot;JavaScript&quot;> function test {   var objSelect = document.all.idSelect; var strOrigHTML    = objSelect.innerHTML; objSelect.innerHTML = strOrigHTML; var strNewHTML     = objSelect.innerHTML;

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

<div class="references_section">