cascading dropdowns from mysql with javascript and

EDIT: Solution at the bottom of this first entry.

I've been scouring SO for a good day or two now and am not having any luck coming up with getting my dynamic drop downs working.

I have a form. The first dropdown is the customer field. What I want is when the customer is selected in the drop down, the terms associated with that customer are selected in the second dropdown. The Second dropdown always has the same options no matter what customer is chosen, its a matter of which of those options are "selected" for that particular customer.

Here is what it looks like.

Dropdown1 (customer)
---------
Acme Corp
Contoso Inc
Smithville

Dropdown2 (terms)
---------
NET15
NET30
NET45

I want dropdown2 to change to the terms associated with that customer in the mysql database.

I can't figure out if I should leave the dropdown options in the form itself and use javascript to call a php file to find out which is selected for that customer -or- if I should simply remove the entire options selection from the form and have javascript call that like I show in my work below.

Here is what I in the form for my two dropdowns, the second is from javascript with div.

<td><select name="company" onchange="getTerms('terms');">
<option value="" selected></option>
<?php while($row = mysql_fetch_array($result)) {
  echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>

<td><div id="terms"></div></td>

And here is my php file that is supposed to be called from javascript. What this does is get the options for the customer and selects the option that is selected. If I run this directly in the browser with ?id=acme corp it works fine so I know the php is working.

<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";


$result3 = mysql_query("SELECT * from netterms ORDER BY days ASC") or die(mysql_error());

$result = mysql_query("SELECT terms FROM customer WHERE company = '$_GET[id]'") or die(mysql_error());
$row = mysql_fetch_array($result);

echo "<option value=\"\" selected></option>";
while($row3 = mysql_fetch_array($result3)) {
  echo "<option value=\"".$row3['days']."\""; echo($row['terms'] == $row3['days']?' selected="selected"':null)?>><?php echo $row3['name']."</option>";

}
?>

And finally, here is my attempt at the javascript/jquery.

<script type="text/javascript">
 function getTerms(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "<select name='terms'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "customertermsdropdownquery.php?id=", false);
 xmlhttp.send();
 }
 </script>

What I am seeing is that everytime dropdown1 is changed, a new (additional) dropdown2 appears on the screen. I don't want multiple dropdowns appearing all over the page, just want the options in the dropdown to refresh. Also, I can't figure out how to pass ?id= to my php file from xmlhttp.open if you could help me out would be great! thanks.

SOLVED:

After several days of trying to get this to work, I stumbled upon a solution on another site. Here is the code. What is important here is the careful use of div tags with table tags. It goes like this which is not shown below in this authors code.

For me the td tags had to be here and not in the php. However, my select tags are in the php. I really hope this is of value to someone searching.

<html>
<head>
<script>
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","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

You should probably use Ajax to load the php script every time the first select changes.

Adapted from sending http request with ajax each time select box is changed :

I tried adapting the answer to your question but I can't really test it:

$("#company").live('change',function() 
{
    var selectVal = $('#company :selected').val();


    var $terms = $('#terms').html('');

    $.ajax({                                      
      url: 'customertermsdropdownquery.php',                         
      data: "id="+selectVal,                                                     
      dataType: 'GET',                
      success: function(data)         
      {

              $terms.append(data);

      } 
    });

});