i am using PHP MYSQL and JAVASCRIP AJAX.

i have multiple dropdown list that i want to make it dependent on each other using AJAX where these dropdown list includes data retrieved from MYSQL database.

the user select from the first dropdown list and based on its selection the second and third dropdown list display the related values.

what i have done until now is to make the second dropdown list depend on the first one.

i need now to make the second and third be depend on the first one.

tables

• site_info:

  • siteID
  • siteNAME
  • ownerID
  • companyID

• owner_info:

  • ownerID
  • ownerNAME

• company_info:

  • companyID
  • companyNAME

code1:

<form method ="post" action ="" name="submit_form">
    <table border="0" width="30%">
        <tr>
           <td>Site Name</td>
           <td>Owner Name</td>
           <td>Company Name</td>
           <td>Subcontractor Name</td>
         </tr>
         <tr>
           <td><select id="site_name"  name = "site_name">

             <?php


                 $query_site_name =$wpdb->get_results("select DISTINCT siteNAME, ownerID  from site_info");
                  foreach($query_site_name as $row)
                  {
        //           $site_name = (array)$site_name;
                   echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
                  } 

             ?>

            <!--create  dropdown list owner names-->
            </select></td>

            <td><select id="owner_name"  name ="owner_name">
            <option value="">Select Owner</option>        
            </select></td>

            <!--create  dropdown list Company names-->


            <td><select id="Company_name"  name ="Company_name">
             <option value="">Select Company</option>       


 <script type="text/javascript">

// make Dropdownlist depend on each other
$(document).ready(function(){
    $('#site_name').change(function(){
         var ownerID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{ownerID:ownerID},
            datatype:"text",
            success:function(data){
                $('#owner_name').html(data);
            }

         });
       });

    });

</script>

where this AJAX script is used to work between the first and second dropdown list only

dropdown_fetch_owner.php:

<?php
 include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
 global $wpdb;
$output = '';
$sql =$wpdb->get_results("select ownerID, ownerNAME from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
var_dump($sql);

$output= '<option value="">Select Owner</option>';
foreach($sql as $row){

//while ($row = mysqli_fetch_array($result)) {
    $output.= "<option value = '".$row ->ownerID."'>".$row->ownerNAME."</option>";
}
echo $output;

?>

thanks for advance

You have an error in your ajax code and you need to write 2 ajax request which is little tough to explain in some words..Just take a look on it..I hope it will give a better http://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/