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(); ?>

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

and <? $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

Is this a javascript question or a php question? If it's the former (which it is unless the first drop down is posting to another page) please show the generated HTML. — Popnoodles, Jun 01 '14 at 14:21

score 2 · Accepted Answer · answered Jun 01 '14 at 14:38

<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>

the second select tag will display data from MySQL – Jihad Mahfouz Jun 01 '14 at 14:47 — Jihad Mahfouz, Jun 01 '14 at 14:47

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

1 Answers1