使用php ajax mysql创建3个依赖的下拉列表

时间：2017-03-20 09:35:28

标签： php mysql ajax

我正在使用PHP MYSQL和JAVASCRIP AJAX。

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

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

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

调试模式：

第一张图片显示了第一个AJAX调用 enter image description here 第二张图显示了第二个AJAX调用 enter image description here

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

表

  • site_info：

    • siteID
    • 网站名称
    • OWNERID
    • companyID

  • OWNER_INFO：

    • OWNERID
    • OWNERNAME

  • company_info：

    • companyID
    • COMPANYNAME

我知道错误出现在每个循环

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

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

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

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

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;

＆GT;

感谢提前

2 个答案:

答案 0 :(得分：1)

javascript中的ajax代码出错，试试这个

（文档）$。就绪（函数（）{

$('#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);
                }

             });
    }


  });

}）;

答案 1 :(得分：0)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <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">
            <option value="">selet</option>
          <option value="1,2">www.google.com</option>
            <!--create  dropdown list owner names-->
            </select></td>

            <td><select id="owner_name"  name ="owner_name">
            </select></td>

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


            <td><select id="Company_name"  name ="Company_name">

         </select>
         </td>
         </tr>
         </table>
      </form>      


</body>
</html>
<script type="text/javascript">

     $('#site_name').change(function(){
            var arrayId =   $(this).val().split(",");
        if(arrayId != ""){
            var ownerID   = arrayId[0];
            var companyID = arrayId[1];
              $.ajax({
                    url:"echo.php",
                    method:"POST",
                    data:{ownerID:ownerID},
                    datatype:"text",
                    success:function(data){
                        $('#owner_name').html(data);
                    }

                 });

                  //depend company name on site name 
                 $.ajax({
                    url:"echo.php",
                    method:"POST",
                    data:{companyID:companyID},
                    datatype:"text",
                    success:function(data){
                        $('#Company_name').html(data);
                    }

                 });
        }


      });
</script>  //ajax code in php <?php

if(isset($_POST['ownerID']))
{
$ownerID = $_POST['ownerID'];
$outputOwner = '';
$outputOwner .= '<option value="">Select Owner</option>';
$outputOwner .= '<option value="'.$ownerID.'">Test Owner</option>';
echo $outputOwner;
}
if(isset($_POST['companyID']))
{

$companyID = $_POST['companyID'];
$outputCompany = '';
$outputCompany .= '<option value="">Select Company</option>';
$outputCompany.= '<option value="'.$companyID.'">Test Comapny</option>';
echo $outputCompany;
}
 ?>
相关问题
最新问题