Я использую PHP MYSQL и JAVASCRIP AJAX.

У меня есть несколько раскрывающихся списков, которые я хочу сделать зависимыми друг от друга с помощью AJAX, где в раскрывающемся списке представлены данные, полученные из базы данных MYSQL.

пользователь выбирает из первого раскрывающегося списка и на основании его выбора второй и третий раскрывающийся список отображает соответствующие значения.

то, что я сделал до сих пор, состоит в том, чтобы сделать второй раскрывающийся список зависшим от первого.

режим отладки:

первый pic показывает первый вызов AJAX Второй снимок показывает второй вызов AJAX

Теперь мне нужно сделать второй и третий, чтобы они зависели от первого.

таблицы

• site_info:

  • siteID
  • Название сайта
  • OwnerId
  • Идентификатор компании

• owner_info:

  • OwnerId
  • имя владельца

• информация о компании:

  • Идентификатор компании
  • название компании

Я знаю, что ошибка в каждом цикле

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

как вставить 3 значения в тег опциона?

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

?>

спасибо за продвижение

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

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