2下拉列表取决于使用PHP MYSQL AJAX的第一个下拉列表

Question

我正在使用PHP MYSQL和JAVASCRIP AJAX。

我有多个下拉列表，我希望使用AJAX使其相互依赖，其中这些下拉列表包含从MYSQL数据库中检索的数据。

用户从第一个下拉列表中选择，根据其选择，第二个和第三个下拉列表显示相关值。

直到现在我所做的是让第二个下拉列表依赖于第一个下拉列表。

我现在需要让第二个和第三个依赖于第一个。

表

site_info:
    siteID
    siteNAME
    ownerID
    companyID

owner_info:
    ownerID
    ownerNAME

company_info:
    companyID
    companyNAME

调试模式：

第一张图片展示了第一个 AJAX通话

第二张图片显示了第二次 AJAX通话

我的代码中的错误在哪里？

代码1：

<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, companyID  from site_info");
                  foreach($query_site_name as $row)
                  {
        //           $site_name = (array)$site_name;
                   echo "<option value = '".$row ->ownerID."', '".$row ->companyID."'>".$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(){
// depend owner name on site name   
    $('#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);
            }

         });

//depend company name on site name 
         var companyID = $(this).val();
         $.ajax({
            url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
            method:"POST",
            data:{companyID:companyID},
            datatype:"text",
            success:function(data){
                $('#Company_name').html(data);
            }

         });


      });

  });

</script>

dropdown_fetch_owner.php

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

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


    $outputOwner.= "<option value = '".$row ->ownerID."'>".$row->ownerNAME."</option>";
}
echo $outputOwner;


$outputCompany = '';
$sql =$wpdb->get_results("select companyID, companyNAME from company_info where companyID = '".$_POST['companyID']."' ORDER BY companyNAME");
var_dump($sql);

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

    $outputCompany.= "<option value = '".$row ->companyID."'>".$row->companyNAME."</option>";
}
echo $outputCompany;

?>