Mein HTML-Dropdown funktioniert nicht im IE6

Question

Ich verwende also ein HTML-Auswahlfeld mit einer Liste von Ländern und einer Schaltfläche zum Öffnen eines kleinen Fensters mit weiteren Details für das ausgewählte Element im HTML-Auswahlfeld.

Hier ist, wie ich dies tue (ich entschuldige mich im Voraus für jede Noobishness hier, ich bin immer noch ziemlich neu zu Javascript):

//in header
<script type="text/javascript">
function popUp() 
{
   countryName = document.getElementById("countrylist").value;
   document.write(countryName);
   dest = "countries/" + countryName + ".html";
   window.open(dest, 0, "toolbar=0, scrollbars=0, statusbar=0, menubar=0,resizable=0,width=400,height=400,left=440,top=312");
}
</script>

<form id="countryform">
<select id="countrylist">
        <!--List of countries removed for brevity-->
</select>
<input type="button" name="countryBtn" value="Submit Query" onClick="popUp();">
</form>

In Firefox funktioniert das problemlos, im IE6 jedoch nicht. Für jede Hilfe wären wir dankbar!

UPDATE: Also habe ich die ersten beiden Ansätze unten versucht, die alternative Popup-Funktion funktionierte in keinem der beiden Browser, und das Ersetzen der document.getElementById-Zeile änderte nichts, funktioniert immer noch gut in Firefox, nicht in IE.

Answer 1

document.getElementById("countrylist").value;

sein muss:

document.getElementById("countrylist")[document.getElementById("countrylist").selectedIndex].value;

Answer 2

Das Problem, das Sie haben, hängt mit dem Erhalt des Ländernamens zusammen. Ich würde Ihre Popup-Funktion ändern, um zu sein:

function popUp() {   

  var e = document.getElementById("countrylist"); 

  var countryName = e.options[e.selectedIndex].value; 

  dest = "countries/" + countryName + ".html";   
  window.open(dest, 0, "toolbar=0, scrollbars=0, statusbar=0, menubar=0,resizable=0,width=400,height=400,left=440,top=312");

}

Answer 3

Ich habe das Problem folgendermaßen gelöst:

function popUp() 
{
   var c = document.getElementById("countrylist");
   var countryName = c.options[c.selectedIndex].text;
   var dest = "countries/" + countryName + ".html";
   window.open(dest, 0, "toolbar=0, scrollbars=0, statusbar=0, menubar=0,resizable=0,width=400,height=400,left=440,top=312");
}

Dies funktioniert sowohl im IE6 als auch im FF3.

Trotzdem vielen Dank für die Hilfe!