使用php ajax mysql创建3个依赖下拉列表 [英] create 3 dependent dropdown list using php ajax mysql

问题描述

我正在使用PHP MYSQL和JAVASCRIP AJAX.

i am using PHP MYSQL and JAVASCRIP AJAX.

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

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.

调试模式:

第一个图片显示了第一个AJAX调用 第二张图片显示了第二个AJAX调用

first pic shows the first AJAX call Second pic shows the second AJAX call

我现在需要使第二个和第三个依赖于第一个.

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

表格

• site_info:

• site_info:

• siteID
• siteNAME
• ownerID
• companyID

owner_info:

owner_info:

• ownerID
• ownerNAME

company_info:

company_info:

• companyID
• companyNAME

我知道错误在于for 每个循环

i know the error is in the for each loop

foreach($query_site_name as $row)
                      {
            //           $site_name = (array)$site_name;
                       echo "<option value = '".$row ->ownerID."', '".$row ->companyID."'>".$row->siteNAME."</option>";
                      }  

如何在选项标签中嵌入3个值?

how to embed 3 values in the option tag??

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

此AJAX脚本仅用于第一个和第二个下拉列表之间

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

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

?>

感谢前进

推荐答案

javascript中的ajax代码出错，请尝试

Error with your ajax code in javascript try this

$(document).ready(function(){

$(document).ready(function(){

$('#site_name').change(function(){

     var  arrayID    = $(this).val().split(",");
     var  ownerID    = arrayID[0];
     var  companyID  = arrayID[1];

     if(ownerID != "" && companyID != ""){

             $.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 
             $.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);
                }

             });
    }


  });

});

这篇关于使用php ajax mysql创建3个依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！