Change items in a drop-down list depending on the selected option in another drop-down list

Question

I have the following code:

<select name="trec">
<? $d -> gettreatment(); ?>
</select>
<select name="treratment">
<? $d -> gettreat(); ?>
</select>

the <? $d -> gettreatment(); ?> <? $d -> gettreatment(); ?>

will display echo "<option value='$r[id]'>$r[cat]</option>";

and <? $d -> gettreat(); ?> <? $d -> gettreat(); ?>

will display echo "<option value='$r[id]'>$r[treatment]</option>";

How to dynamically narrow down (or limit) the items in a second drop down list based on the selected item from first selected item? For example if we have one list of countries in first drop down list and have list of states in the second list then once USA is selected from the country list then the second list should change to list only the states of USA

Answer 1

<script type="text/javascript">
    $(function() {
      $("#form_process").click(function() {
        //$("#choice").val(); //you cannot use the same id for more than 1 tag
        var choice = 0; 
             if(document.getElementById("choice1").checked) choice='Yes';
        else if(document.getElementById("choice2").checked) choice='No';
        else if(document.getElementById("choice3").checked) choice='Dont Know';

        var comments = document.getElementById('comments').value; //$("#comments").val();
        var dataString = 'choice='+ choice + '&comments=' + comments;

        $.ajax({
          type: "POST",
          url: "**ABSOLUTE URL TO PROCESSOR**",
          data: dataString
        });
     });
   });
</script>