Microsoft KB Archive/829907

= BUG: The selected attribute of an option element is missing in a cloned ComboBox control =

Article ID: 829907

Article Last Modified on 5/31/2007

-

APPLIES TO


 * Microsoft Internet Explorer (Programming) 6.0
 * Microsoft Internet Explorer 5.5

-





SYMPTOMS
In a ComboBox control or in a ListBox control, you may set the selected attribute of an option element that is other than the first option element. If you use the cloneNode method in script code to clone the ComboBox control or the ListBox control, you notice that either the selected attribute is missing or that the selected attribute is set for the first option element.



WORKAROUND
To work around this problem, store the selectedIndex property value of the option element before you clone the ComboBox control or the ListBox control. Then, set the selectedIndex property value of the cloned control with the stored value.

For example, you may use the following code to clone the oCombobox ComboBox control: var clonedCombobox = oCombobox.cloneNode(true); To work around the problem, modify your code as follows: var i = oCombobox.selectedIndex; var clonedCombobox = oCombobox.cloneNode(true); clonedCombobox.selectedIndex = i;



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



Steps to reproduce the behavior
  Start Notepad, and then paste the following HTML code to Notepad:   Cloned Control Test  function onBtnclick1 {         var clonedCombobox = oCombobox.cloneNode(true); alert(&quot;The cloned ComboBox control is : &quot; + clonedCombobox.innerHTML ); }      function onBtnclick2 {         var clonedListbox = oListbox.cloneNode(true); alert(&quot;The cloned ListBox control is : &quot; + clonedListbox.innerHTML ); }         <OPTION value=&quot;1&quot;>Item 1</OPTION> <OPTION value=&quot;2&quot;>Item 2</OPTION> <OPTION value=&quot;3&quot; selected>Item 3</OPTION> <OPTION value=&quot;4&quot;>Item 4</OPTION> </SELECT> <INPUT id=&quot;Button1&quot; onclick=&quot;onBtnclick1;&quot; type=&quot;button&quot; value=&quot;ClonedComboBox&quot; name=&quot;Button1&quot;> <SELECT id=&quot;oListbox&quot; size=&quot;2&quot; name=&quot;oListbox&quot;> <OPTION value=&quot;1&quot;>ListBox Item 1</OPTION> <OPTION value=&quot;2&quot;>ListBox Item 2</OPTION> <OPTION value=&quot;3&quot; selected> ListBox Item 3</OPTION> <OPTION value=&quot;4&quot;>ListBox Item 4</OPTION> </SELECT> <INPUT id=&quot;Button2&quot; onclick=&quot;onBtnclick2;&quot; type=&quot;button&quot; value=&quot;ClonedListBox&quot; name=&quot;Button2&quot;> </BODY> </HTML> Note This code sets the selected attribute for the third option element. </li> <li>Save the document as Test1.html.</li> <li>Open the Test1.html file in Microsoft Internet Explorer.</li> <li>In the Cloned Control Test - Microsoft Internet Explorer window, click ClonedComboBox. You receive a message box that displays the value of the innerHTML property of the cloned ComboBox control. Notice that the selected attribute is set for the first option element of this ComboBox control.</li> <li>Click OK, and then click ClonedListBox. You receive a message box that displays the value of the innerHTML property of the cloned ListBox control. Notice that the selected attribute does not appear.</li></ol>

<div class="references_section">