My HTML dropdown won't work in IE6

Question

So I'm using an HTML select box with a list of countries and a button to open a small window with more details for the selected item in the HTML select box.

Here's how I'm doing this (I apologize in advance for any noobishness here, I'm still pretty new to 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>

This works fine in Firefox, but not in IE6. Any help would be appreciated!

UPDATE: So I tried the first two approaches below, the alternative popup function did not work in either browser, and replacing the document.getElementById line didn't change anything, still works fine in Firefox, doesn't in IE.

Answer 1

document.getElementById("countrylist").value;

needs to be:

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

Answer 2

The issue you are having is with the getting of the country name. I would change your popup function to be:

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

Here's how I fixed it:

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");
}

This works in both IE6 and FF3.

Thanks for the help anyways!