Complicated Dynamic Dropdowns

[fireman]

Twofold issue here:

First, I need to update a drop down based on the input from another drop down in the same form.

 

I am dynamically filling dropdown 1 from db

 

<?php
$result = mysql_query("SELECT cat_name FROM cat_list WHERE cat_filter = 'E'", $db);
?>

<form name="engMaint" method="post" action="<?php echo $PHP_SELF; ?>">
  <div align="center">
  <table width="500" border="1" align="center" cellpadding="4" cellspacing="0">
    <tr>	  
      <td width="200" align="left">
        <select name="engMaintCat" id="engMaintCat">
  <?php while ($row = mysql_fetch_array($result)){ ?>
            <option selected>Select</option>          
            <option><?php echo $row[cat_name]; ?></option>
  <?php } ?>
        </select>        
      </td>
      <td width="200" align="left">
        <select name="engMaintList" id="engMaintList">
	  What Goes Here???
</select>        
      </td>
    </tr>
  </table>
  </div>
</form>

 

Now I know JavaScript will be involved utilizing "onChange".  I don't know how to implement it though.

It is tricky because I there needs to be another db call to get the fields for the second drop down.

 

EX. A few of the selections in dropdown 1 will be:

 

Ice Cream

Candy

Fruit

 

If Ice Cream is selected I will query table 'cat_icecream' and select field 'icecream_flavors' to populate dropdown 2 with:

 

Chocolate

Vanilla

Strawberry

 

or if Fruit is selected in dropdown1 than I query table 'cat_fruit' and select field 'fruit_type' to populate dropdown 2 with:

 

Apple

Grapes

Orange

 

Part two of my request is that I need a "Add" button to duplicate the form on the same page. (of course with only dropdown 1 filled.)