2017-03-20 2 views
2

私はPHP MYSQLとJAVASCRIP AJAXを使用しています。php ajax mysqlを使用して3つの依存ドロップダウンリストを作成

私は、これらのドロップダウンリストにMYSQLデータベースから取得したデータが含まれているAJAXを使用して、相互に依存させたい複数のドロップダウンリストを持っています。

ユーザがドロップダウン・リストから選択し、その選択に基づいドロップダウン・リストは、関連する値を表示します。

私が今まで行ってきたことは、第2のドロップダウンリストを最初のものに依存させることです。

デバッグモード:

最初のPICは最初のAJAX呼び出し enter image description here を示しセカンドpicが、私は第二と第三BEを作るために今必要な二AJAX呼び出し enter image description here

が最初に依存示し1。

テーブル

  • site_info:

    • SITEID
    • サイト名
    • OWNERID
    • 企業ID
  • owner_info:

    • OWNERID
    • ownernameに
  • company_info:

    • 企業ID
    • 得意

私はエラーがどのようにオプションタグに3つの値を埋め込むための

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

各ループのために知っています?

CODE1:

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

:このAJAXスクリプトは最初と2番目のドロップダウンリストのみ

dropdown_fetch_owner.php間で機能するために使用される

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

? >

してみてくださいJavaScriptであなたのAjaxコードと事前

+0

この記事をお読みください。http://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/ –

答えて

1

エラーのために感謝この

$(ドキュメント).ready(関数(){

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

      }); 
    } 


    }); 

});

+0

私はあなたの答えは動作しませんでした試みました。 私はこの問題がPHPの最初の** select **の中で**オプションタグ** –

+0

の中の各ループの中にあると思う。もしあなたの選択クエリにエラーがあるなら、最初のドロップダウンの中にはオプションがなければならない。 – dtanwar

+0

最初のドロップダウン作業が完璧で、最初のドロップダウンから2番目の関連データを選択すると、その中にデータがあります。 **私の問題は、3番目のドロップダウンに関するもので、この3番目のドロップダウンでは、ユーザーが最初のドロップダウンから選択すると、関連するデータを表示する必要があります**。 私の質問はどのように**オプションの値のタグ** **の横に含めることができます** $行 - > ownerID。**この変数**。$行 - > companyID ** **私は私の編集質問と2枚の写真を追加して何が起こったのかを説明してください** –

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; 
} 
?> 
+0

この回答はうまくいかず、私は**オーナーネームdroplist **の結果を得ました。 **会社名**私は何も得ていません –

+0

これはあなたがする必要があるすべての作業コードは、クエリに応じて – dtanwar

+0

のecho.phpファイルを変更することですそれはパラメータが正しいが、Webページ上の3番目のドロップダウンリストdoesn何も表示しない –

関連する問題