3 Ajax和PHP依赖下拉

Question

Good day ,

I have 3 PHP pages ('test1.php' , 'res.php' , 'desc.php') ,So I want to make 3 dependent drop down. all drop down dependent to previous drop down. So when I select an item from first drop down , all data fetch from database by 'res.php' and add to second drop down as item . But when I select second drop down , page will refresh and back to first step and all drop down item selected gone .

test1.php

<script>

function load_sub_cat(str){     

      var xmlhttp;
      xmlhttp=new XMLHttpRequest();
      xmlhttp.open("get","res.php?q="+str,false);

      xmlhttp.send();   

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     

            }
  </script>

        <select name="users" onChange="load_sub_cat(this.value)">
        <option value="0">Select a restaurant</option>
   <?php

         $db->setQuery("SELECT id, name FROM yh5lw_rest_dropdown where active=1");
         $results = $db->loadObjectList();

         foreach ($results as $result) {

         echo "<option value=".$result->id.">". $result->name."</option>";

        }

  ?>

   </select>
   <div id="txtHint"></div>

res.php

 <script>
 function load_sub_cat(str){


     var xmlhttp1;
     xmlhttp1=new XMLHttpRequest();
     xmlhttp1.open("get","desc.php?desc="+str,false);
     xmlhttp1.send(); 
     document.getElementById("txt23").innerHTML=xmlhttp1.responseText;

 }
</script>

<select name="users1" onChange="load_sub_cat(this.value)">
    <option value="">Select a main course</option>
    <?php
    $q = intval($_GET['q']);

    $db->setQuery("SELECT price,id, nameEN , nameFA FROM yh5lw_food_dropdown where active=1 AND res_id ='".$q."'");
    $results = $db->loadObjectList();

    foreach ($results as $result) {
        echo "<option value=".$result->id.">". $result->nameEN." &nbsp; (".$result->price"</option>";
        }
        $count++ ;
    }
    ?>
    </select> 
    <div id="txt23"></div>

desc.php

<?php echo $_GET['desc'] ?>

Answer 1

Although you can write your own code for this, you don't need to reinvent the wheel for this functionality - try the jQuery Cascading Dropdown Plugin, it's free and does precisely what you want to do. It's easy to setup, it supports AJAX, and and you'll only need to use your server-side code for the AJAX calls.