Microsoft KB Archive/298978

= BUG: Adding OPTION to SELECT Box Contained by Non-Display Element May Lose Selection =

Article ID: 298978

Article Last Modified on 4/21/2006

-

APPLIES TO


 * Microsoft Internet Explorer 5.5
 * Microsoft Internet Explorer 4.0 128-Bit Edition
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 4.01 Service Pack 1
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 5.0
 * Microsoft Internet Explorer 5.01
 * Microsoft Internet Explorer (Programming) 5.01 SP1

-



This article was previously published under Q298978



SYMPTOMS
When you add OPTION elements to a SELECT box, and the SELECT element is contained in an element that is set to display: none by using the style attribute, the selected OPTION value may be lost.



CAUSE
Internet Explorer is losing the selected OPTION value if that value is set before the options to the SELECT box are added.



RESOLUTION
To avoid the problem, set your container element to display: none by using script instead of by using the style attribute of the element.

To work around this problem, set the select value after you add the OPTION element to the SELECT box.



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



MORE INFORMATION
The following code demonstrates the failing and working code:    function populateSelects { populateProblem; populateWorking; div1.style.display = &quot;Block&quot;; } function populateProblem{ var oOption; for (var x = 0; x < 3; x++) { oOption = document.createElement(&quot;Option&quot;); oOption.text = &quot;Option &quot; + x;       oOption.value = x;        //  Setting selected before adding Option to select1 demonstrates problem. if (x == 1) { oOption.selected = true; }       select1.add(oOption); } } function populateWorking { var oOption; for (var x = 0; x < 3; x++) { oOption = document.createElement(&quot;Option&quot;); oOption.text = &quot;Option &quot; + x;       oOption.value = x;        //  Setting selected after adding Option to select1 resolves problem. select2.add(oOption); if (x == 1) { oOption.selected = true; }   } }     When the page loads, it creates the Option elements and adds them to the Select tag. Both Select tags should have Option 1 selected. However, the 'Problem' Select is not set to Option 1 as we added the Option after the selected value is set. This is the bug. In the working one, we set the selected value after we add the option. In this case, it works fine. Problem:  Working: </SELECT> </DIV> </BODY> </HTML>

<div class="references_section">