Klara: Internet Explorer zeigt bei den Options kein Text an

Hi

kann mir jemand sagen, warum der Internet Explorer beim 2. Klick auf "alle Entfernen" die 3 Options ohne den Text wiederherstellt? Nach dem ersten Klick wird der Text angezeigt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de" lang="de">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-15" />  
    <meta http-equiv="Content-Style-Type" content="text/css" />  
    <title>Test</title>  
    <script type="text/javascript">  
    <!--  
    /* <![CDATA[ */  
      function Test(){  
        this.dummyOptions = new Array();  
  
        this.createDummyOptions = function(obj){  
          var optgroups = obj.getElementsByTagName("optgroup");  
          var options;  
          var newEntry;  
  
          if(this.dummyOptions.length != optgroups.length){  
            for (var i = 0; i < optgroups.length; i++){  
              options = optgroups[i].getElementsByTagName("option");  
  
              newEntry = document.createElement("option");  
              newEntry.appendChild(document.createTextNode(options[0].text));  
              newEntry.value = options[0].value;  
  
              this.dummyOptions.push(newEntry);  
            }  
          }  
        }  
  
        this.restoreDummyOptions = function(obj){  
          var optgroups = obj.getElementsByTagName("optgroup");  
          var options;  
  
          for (var i = 0; i < optgroups.length; i++){  
            options = optgroups[i].getElementsByTagName("option");  
            if(options.length == 0){  
              optgroups[i].appendChild(this.dummyOptions[i]);  
            }  
          }  
        }  
  
        this.delAllEntriesFromHtmlOption = function(obj){  
          for(var i = obj.length; i > 0; i = i-1) {  
            obj.options[i - 1] = null;  
          }  
        }  
  
        this.delAll_onclick = function(){  
          this.delAllEntriesFromHtmlOption(document.forms[0].elements['test']);  
          this.restoreDummyOptions(document.forms[0].elements['test']);  
        }  
      }  
    /* ]]> */  
    -->  
    </script>  
  </head>  
  
  <body>  
    <h1>Test</h1>  
    <form method="post" action="" onsubmit="return false">  
      <p>  
        <select id="Test" name="test" size="12" multiple="multiple">  
          <optgroup label="Test1"><option value="---">Test1</option></optgroup>  
          <optgroup label="Test2"><option value="---">Test2</option></optgroup>  
          <optgroup label="Test3"><option value="---">Test3</option></optgroup>  
        </select>  
      </p>  
      <p>  
        <input type="button" name="delAll" value="alle Entfernen" onclick="test_1.delAll_onclick()" />  
      </p>  
    </form>  
  
    <script type="text/javascript">  
    <!--  
    /* <![CDATA[ */  
      test_1 = new Test();  
      test_1.createDummyOptions(document.forms[0].elements['test']);  
    /* ]]> */  
    -->  
    </script>  
  </body>  
</html>