Ronny Riedel: Probleme mit [SELECT].selectedIndex

Beitrag lesen

Hallo zusammen,

gegeben sein folgender Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
<html>  
   <head>  
      <title>selectedIndex-Test</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
      <style type="text/css">  
         #divData {  
            float: left;  
         }  
         #divDebug {  
            background-color: #ffdddd;  
            border: 1px solid blue;  
            float: right;  
            height: 12cm;  
            width: 15cm;  
         }  
      </style>  
      <script type="text/javascript">  

~~~~~~javascript
  
         function z(eleTmp, iMode) {  
            var eleDbg = document.getElementById("divDebug");  
            if (iMode == 1) {  
               eleDbg.appendChild(document.createTextNode("down "));  
            } else {  
               eleDbg.appendChild(document.createTextNode("up "));  
               eleDbg.appendChild(document.createTextNode("selektierter Eintrag: " + eleTmp.selectedIndex + " (selectedIndex)"));  
               /* */  
               var arrOpt = eleTmp.childNodes;  
               for (var i = 0; i < arrOpt.length; i++) {  
                  if ((arrOpt[i].nodeName == 'OPTION') && (arrOpt[i].selected == true)) {  
                     eleDbg.appendChild(document.createTextNode(" // " + arrOpt[i].index + " (childNodes)"));  
                  }  
               }  
               /* */  
               arrOpt = eleTmp.options;  
               for (var i = 0; i < arrOpt.length; i++) {  
                  if (arrOpt.item(i).selected == true) {  
                     eleDbg.appendChild(document.createTextNode(" // " + i + " (options)"));  
                  }  
               }  
               eleDbg.appendChild(document.createElement("br"));  
            }  
         }  

~~~~~~html
  
      </script>  
   </head>  
   <body>  
      <div id="divData">  
         <select onmousedown="z(this, 1);" onmouseup="z(this, 2);" name="sName" size="1">  
            <option value="">&nbsp;</option>  
            <option value="2">Mercedes</option>  
            <option value="5">BMW</option>  
            <option value="4">Porsche</option>  
            <option value="">----------------------------</option>  
            <option value="1">Toyota</option>  
         </select>  
      </div>  
      <div id="divDebug"></div>  
   </body>  
</html>  

Wenn ich jetzt nacheinander die Einträge "Porsche", "Mercedes", "Toyota" und "BMW" auswähle, dann steht im DebugBereich

1.) im FireFox:
.   down up selektierter Eintrag: 3 (selectedIndex) // 3 (childNodes) // 3 (options)
.   down up selektierter Eintrag: 1 (selectedIndex) // 1 (childNodes) // 1 (options)
.   down up selektierter Eintrag: 5 (selectedIndex) // 5 (childNodes) // 5 (options)
.   down up selektierter Eintrag: 2 (selectedIndex) // 2 (childNodes) // 2 (options)

2.) im IE (6.0.2800.xxx)
.   down down up selektierter Eintrag: 0 (selectedIndex) // 0 (childNodes) // 0 (options)
.   down down up selektierter Eintrag: 3 (selectedIndex) // 3 (childNodes) // 3 (options)
.   down down up selektierter Eintrag: 1 (selectedIndex) // 1 (childNodes) // 1 (options)
.   down down up selektierter Eintrag: 5 (selectedIndex) // 5 (childNodes) // 5 (options)

Wie man sieht "hängt" der IE immer eine Auswahl hinterher. Es fällt auch auf, das "onmousedown" bei IE zweimal ausgelöst wird. Es scheint so, als ob der IE das Element "einfriert", wenn man die Maustaste drückt. Und wenn man die Maustaste wieder los läßt, wird sich nicht auf das aktuelle Objekt bezogen, sondern auf das "eingefrorene".

Kann mir mal einer erklären, warum das so ist? Wie kann ich den IE dazu bringen, sich genauso zu verhalten wie der FireFox?

Danke & Gruß
  Ronny

PS: Bin in einem Intranet und kann daher IE nicht updaten!