下拉列表中的Ajax和SQL填充

时间:2017-04-01 13:12:31

标签: php jquery mysql ajax drop-down-menu

这似乎是我生命中的痛苦,我现在花了几个小时才研究这个问题并没有一个研究解决方案似乎解决了这个问题。我的代码应该填充一个名为" notes"的数据库的下拉列表。填充的字段应该是" name"然后程序应该选择名称相同的所有记录。除了它似乎没有填充列表。我不认为这是一个数据库连接错误,因为所有患者都被选中后会显示所有记录。

这是我的代码:



<?php

// php select option value from database

$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "CareM_database";

// connect to mysql database
   
 //load_data_select.php

 mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);  
 $connect = mysqli_connect($hostname, $username, $password, $databaseName);  
 function fill_name($connect)  
 {  
      $output = '';  
      $sql = "SELECT name, id FROM name";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<option value="'.$row["id"].'">'.$row["name"].'</option>';  
      }  
      return $output;  
 }  
 function fill_patients($connect)  
 {  
      $output = '';  
      $sql = "SELECT * FROM notes";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<div class="col-md-3">';  
           $output .= '<div style="border:1px solid #ccc; padding:20px; margin-bottom:20px;">'.$row["details"].'';  
           $output .=     '</div>';  
           $output .=     '</div>';  
      }  
      return $output;  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Patient Notes View</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3>  
                     <select name="name" id="name">  
                          <option value="">Show All Patients</option>  
                          <?php echo fill_patients($connect); ?>  
                     </select>  
                     <br /><br />  
                     <div class="row" id="show_patients">  
                          <?php echo fill_patients($connect);?>  
                     </div>  
                </h3>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#name').change(function(){  
           var name_id = $(this).val();  
           $.ajax({  
                url:"load_data.php",  
                method:"POST",  
                data:{id:id},  
                success:function(data){  
                     $('#show_name').html(data);  
                }  
           });  
      });  
 });  
 </script>  
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

首先在添加bootstrap js

之前添加jquery.min.js

答案 1 :(得分:0)

您并未在fill_name中调用select函数,而是调用fill_patients,而我在您的HTML中看不到任何ID为#show_name的元素

<?php

// php select option value from database

$hostname = "localhost";
$username = "root";
$password = "";
$databaseName = "CareM_database";

// connect to mysql database
   
 //load_data_select.php

 mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);  
 $connect = mysqli_connect($hostname, $username, $password, $databaseName);  
 function fill_name($connect)  
 {  
      $output = '';  
      $sql = "SELECT name, id FROM name";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<option value="'.$row["id"].'">'.$row["name"].'</option>';  
      }  
      return $output;  
 }  
 function fill_patients($connect)  
 {  
      $output = '';  
      $sql = "SELECT * FROM notes";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<div class="col-md-3">';  
           $output .= '<div style="border:1px solid #ccc; padding:20px; margin-bottom:20px;">'.$row["details"].'';  
           $output .=     '</div>';  
           $output .=     '</div>';  
      }  
      return $output;  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Patient Notes View</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           </script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3>  
                     <select name="name" id="name">  
                          <option value="">Show All Patients</option>  
                          <!-- <?php echo fill_patients($connect); ?> --> 
                          <!-- call fill_name function instead of the above function -->
                           <?php echo fill_name($connect); ?> 
                     </select>  
                     <br /><br />  
                     <div class="row" id="show_patients">  
                          <?php echo fill_patients($connect);?>  
                     </div>  
                </h3>  
           </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script>
 $(document).ready(function(){  
      $('#name').change(function(){  
           var name_id = $(this).val();  
           $.ajax({  
                url:"load_data.php",  
                method:"POST",  
                data:{id: name_id},
                success:function(data){  
                     $('#show_name').html(data);  
                }  
           });  
      });  
 });  
 </script>    
      </body>  
 </html> 

结果enter image description here