Firefox and chained select menus

Hi all,

I have a problem with a script that is driving me round the bend and I do hope someone can shed some light on the matter. I am new to Javascript and need a nudge in the right direction.

I have three select menus - Country, Region and County.

If you select a Country, the Region menu updates. If you then choose a Region, the County menu updates.

I have used a script from GreatASP.co.uk and, after a small amount of fiddling and a large amount of swearing, I have this working in IE but Firefox doesn't even try:

<SCRIPT LANGUAGE="Javascript">

function getSelect(selectname,selection,recordset,destination){
	
	if(selection!=''){

	 var doc = null; 

// Make a new XMLHttp object

   if (typeof window.ActiveXObject != 'undefined' ) 
   { 
       doc = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else 
   { 
       doc = new XMLHttpRequest(); 
   }
	 
// Load the result from the response page

	if (doc){ 	 
		doc.open("GET", "populate.asp?selectname="+selectname+"&selection=" + selection+"&recordset="+recordset, false);
		doc.send(null);
// Write the response to the div
		destination.innerHTML = doc.responseText;
	}else{
		destination.innerHTML = 'Browser unable to create XMLHttp Object';
		}
}else{
// Return the next select box back to the default
destination.innerHTML= '<select><option value=""></option></select>';
}

selectname= null
selection = null
recordset = null

}
</SCRIPT>

In the original version from GreatASP, the author puts the following line about the function declaration, but I have found that this actually stops the code from working in IE.

// declare new variables for each new div that you add, and link to the div by ID
var subcatdiv = document.getElementById("subcat_div");

Obviously, I changed the variable name and div name to suit.

I can see what it's for, in that you have to define the variable before the function calls it - indeed, Firefox warns me in the error console if the above line(s) are not included, but still doesn't work when I put them in. It says regiondiv is not defined.

The DOCTYPE of the HTML file is 4.01 Transitional if that helps at all.

The HTML that calls the function is:

<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region',regiondiv);">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>

<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County',countydiv);">
</SELECT>
</DIV>

<DIV ID="countydiv">
<SELECT NAME="Area">
<OPTION></OPTION>
</SELECT>
</DIV>

I have tried replacing various parts of the code with getElementById calls but nothing seems to work. The above code is the only variation of dozens that seems to work in IE and I have never got it to do anything in Firefox.

I realise I have 3 SELECTs called Area - this is because the form needs to produce a URL string that groups Country, Region and County together, separated by commas.

Please help!

Thanks.