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


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 6.0
  • Microsoft Internet Explorer (Programming) 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.

MORE INFORMATION

Steps to reproduce the behavior

  1. Start Notepad, and then paste the following HTML code to Notepad:
    <HTML>
   <HEAD>
      <TITLE>Cloned Control Test</TITLE>
       <SCRIPT>
       function onBtnclick1()
       {
     	  var clonedCombobox = oCombobox.cloneNode(true);  
          alert("The cloned ComboBox control is : " + clonedCombobox.innerHTML );
       }
       function onBtnclick2()
       {
          var clonedListbox = oListbox.cloneNode(true); 
          alert("The cloned ListBox control is : " + clonedListbox.innerHTML );
       }
      </SCRIPT>
  </HEAD>
   <BODY>
      <SELECT id="oCombobox" name="oCombobox">
         <OPTION value="1">Item 1</OPTION>
         <OPTION value="2">Item 2</OPTION>
         <OPTION value="3" selected>Item 3</OPTION>
         <OPTION value="4">Item 4</OPTION>
      </SELECT>
      <INPUT id="Button1" onclick="onBtnclick1();" type="button" value="ClonedComboBox" name="Button1"><br>
      <SELECT id="oListbox" size="2" name="oListbox">
         <OPTION value="1">ListBox Item 1</OPTION>
         <OPTION value="2">ListBox Item 2</OPTION>
         <OPTION value="3" selected>
            ListBox Item 3</OPTION>
         <OPTION value="4">ListBox Item 4</OPTION>
      </SELECT>
      <INPUT id="Button2" onclick="onBtnclick2();" type="button" value="ClonedListBox" name="Button2">
   </BODY>
</HTML>
    Note This code sets the selected attribute for the third option element.
  2. Save the document as Test1.html.
  3. Open the Test1.html file in Microsoft Internet Explorer.
  4. 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.
  5. 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.

REFERENCES

For more information about the cloneNode method, visit the following Microsoft Developer Network (MSDN) Web site:

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/clonenode.asp

Modification Type:MajorLast Reviewed:4/21/2006
Keywords:kbScript kbControl kbhtml kbbug KB829907 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.