A31 on "Nested Select Menu"

Hi,
I am really struggling to get a second dropdown / select box to be automatically populated and I hope someone here can help me find my mistake.

Before moving to Wordpress, I have been using the example by W3Schools but now in wordpress, I can't seem to get it working.

My Code is as follows:

<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","Fin_GetAllocation.php?q="+str,true);
xmlhttp.send();
}
</script>
<form>
	<select name="sel_CostCentre" id="sel_CostCentre" onchange="showUser(this.value)">
		<option value=0>Please Select Cost Centre: <?php echo $CostCentreDescriptionOptions; ?>
	</select>
    <select name="Sel" id="txtHint"></select>
</form>

then the code in the file "Fin_GetAllocation.php" is as follows:

<?php
	global $wpdb;

	$q=$_GET["q"];

	$SQL_Query01 = ("SELECT * FROM wp_allocations_tbl WHERE CostCentreDescription = '$q'");
	$SQL_Results01 = $wpdb->get_results($SQL_Query01);

	foreach($SQL_Results01 as $myResult01)
		{
			$AccountDescription = $myResult01->AccountDescription; //Field in DB
			$AccountDescriptionOptions.="<option value='$AccountDescription'>" . $AccountDescription . "</option>";
		}

So my first dropdown / select box works perfectly, but I can't seem to get the second box to populate.

Can you please help?