PHP動態複選框列表，基於級聯選擇選擇

Question

我自告奮勇，想創造一些還挺數據庫供我上學，有效地跟蹤學生的不當行爲。我不是專家。我一直在做的是，我爲了我想要的，自學了它，並試圖將所有東西縫合在一起。

我碰到這個教程，差不多就是我想要的，我的工作在此基礎上對數據庫：http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/

，因此，我想出了這一點：http://ipoh.wesleyschool.edu.my/ace_beta.php

整體思路是基於選擇的班級，該特定班級的學生將作爲列表出現。

整個事情的作品的那一刻，但我想它推到另一個層次。正如你所看到的，我寫的東西只允許一個學生一次，如果我想同時選擇多個學生做同樣的錯誤行爲呢？

我Google的「動態複選框」等。但不知何故，我不知道將它們連接，使其工作...我已經試了又試，這就是爲什麼你在這裏找到我問。

CODE（ace_beta.php）：

主網頁上運行：ace_beta.php;其中，我相信我卡在這個地方：

<td width="25%" valign="top"'> 

<table border="0" width="100%" cellpadding="6"> 
<tr> 
<td width="100%" align="middle" valign="top" bgcolor='#636363'> 
<font face="Arial" size='5' color='#ffffff'><b> STEP ONE </b></font> 
</td></tr></table> 

<br /> 
<b> STUDENT INFORMATION ::. </b> 
<br /> 

<table border="0" width="100%" cellpadding="3"> 

<tr> 
<td width="20%" align="right"> class </td> 
<td width="80%" align="left"> 
    <select id="class" name="class"> 
     <?php echo $opt->ShowClass(); ?> 
    </select></td> 
</tr> 

<tr> 
<td width="20%" align="right"> student </td>  
<td width="80%" align="left"> 
    <select id="student" name="student"> 
     <option value="0">choose...</option> 
     </select></td> 
</tr> 

</table> 

</td> 

ace_beta.php是緊密相連的select.class.php其中函數存儲...

CODE（select.class。 PHP）

<?php 
class SelectList 
{ 
    protected $conn; 

     public function __construct() 
     { 
      $this->DbConnect(); 
     } 

     protected function DbConnect() 
     { 
      include "db_config.php"; 
      $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database"); 
      mysql_select_db($db,$this->conn) OR die("can not select the database $db"); 
      return TRUE; 
     } 

     public function ShowClass() 
     { 
      $sql = "SELECT * FROM class"; 
      $res = mysql_query($sql,$this->conn); 
      $class = '<option value="0">choose...</option>'; 
      while($row = mysql_fetch_array($res)) 
      { 
       $class .= '<option value="' . $row['id_cls'] . '">' . $row['name'] . '</option>'; 
      } 
      return $class; 
     } 

     public function ShowStudent() 
     { 
      $sql = "SELECT * FROM student WHERE id_cls=$_POST[id]"; 
      $res = mysql_query($sql,$this->conn); 
      $student = '<option value="0">choose...</option>'; 
      while($row = mysql_fetch_array($res)) 
      { 
       $student .= '<option value="' . $row['id_stu'] . '">' . $row['name'] . '</option>'; 
      } 
      return $student; 
     } 

} 

$opt = new SelectList(); 

?> 

問題

可有人是一種足以指導我雖然豪w至做到以下幾點：

1. 基於「選課」的ace_beta.php，複選框 承載相應的同學會出現在ace_beta.php
2. 中的「學生 區」名單方法來處理所選名稱，在 之後的ace_add.php中點擊「提交」按鈕。

Answer 1

所有你需要你的數據庫查詢分成持有一個連接到數據庫類的第一。爲了得到這個，你需要一個singleton。

/** 
* Simple DB class as Singleton. 
*/ 
class Database { 

    /** 
    * @var PDO 
    */ 
    protected $conn; 

    /** 
    * @var Database 
    */ 
    private static $instance; 

    /** 
    * Method that ensures you have only one instance of database 
    * 
    * @return Database 
    */ 
    public static function getInstance() { 
     if (self::$instance === null) { 
      self::$instance = new self(); 
     } 

     return self::$instance; 
    } 

    /** 
    * Query method. 
    * 
    * @example Database::getInstance()->query("SELECT * FROM table where param1 = ? AND param2 = ?", array($param1, $param2)); 
    * 
    * @param string $sql 
    * 
    * @return array 
    */ 
    public function query($sql) { 
     $statement = $this->conn->prepare($sql); 
     $args = func_get_args(); 
     array_shift($args); 
     $statement->execute($args); 
     return $statement->fetchAll(PDO::FETCH_ASSOC); 
    } 

    /** 
    * Gets connection 
    * 
    * @return PDO 
    */ 
    public function getConnection() { 
     return $this->conn; 
    } 

    protected function DbConnect() 
    { 
     include "db_config.php"; 

     $dsn = sprintf('mysql:dbname=%s;host=%s', $db, $host); 

     try { 
      $this->conn = new PDO($dsn, $user, $password, 

       // be sure you are have ut8 symbols 
       array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\'')); 

      // all errors from DB are exceptions 
      $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 


     } catch (PDOException $e) { 
      echo 'Connection failed: ' . $e->getMessage(); 
      return FALSE; 
     } 

     return TRUE; 
    } 

    private function __construct() 
    { 
     $this->DbConnect(); 
    } 

    private function __clone() {} 
    private function __wakeup() {} 

} 

我改變了你的代碼了一下。現在看起來更簡單了吧？

class SelectList 
{ 

    /** 
    * Get class list 
    * 
    * @return array 
    */ 
    public function getClass() 
    { 
     $sql = "SELECT * FROM class"; 
     $res = Database::getInstance()->query($sql); 

     return $res; 
    } 

    /** 
    * Get list of students from $classId 
    * 
    * @param int $classId class students from 
    * 
    * @return array 
    */ 
    public function getStudent($classId) 
    { 
     $sql = "SELECT * FROM student WHERE id_cls= ?"; 

     $res = Database::getInstance()->query($sql, array($classId)); 

     return $res; 
    } 

} 

，這裏是你改變ace_beta.php

<!-- 
considering you are have form that looks like 
<form method="post" action="ace_beta.php"> 


and somewhere you are have submit button :) 
--> 

<td width="25%" valign="top"> 

    <table border="0" width="100%" cellpadding="6"> 
     <tr> 
      <td width="100%" align="middle" valign="top" bgcolor='#636363'> 
       <font face="Arial" size='5' color='#ffffff'><b> STEP ONE </b></font> 
      </td></tr></table> 

    <br /> 
    <b> STUDENT INFORMATION ::. </b> 
    <br /> 

    <table border="0" width="100%" cellpadding="3"> 

     <tr> 
      <td width="20%" align="right"> class </td> 
      <td width="80%" align="left"> 
       <select id="class" name="class"> 
        <option value="0">choose...</option> 
        <?php foreach ($opt->getClass() as $class): ?> 
         <option value="<?php echo $class['id_cls'] ?>"><?php echo $class['name'] ?></option> 
        <?php endforeach; ?> 
       </select> 
      </td> 
     </tr> 

     <tr> 
      <td width="20%" align="right"> student </td> 
      <td width="80%" align="left"> 
       <div id="students"> 

       </div> 
      </td> 
     </tr> 

    </table> 

</td> 

現在，您的任務：

爲了讓學生檢查框，你需要使用AJAX。爲此，你需要有一個名爲例如get_students.php一個單獨的文件

include 'select.class.php'; 
$opt = new SelectList(); 

// watch if there are any GET request coming with `class=ID` 
if (isset($_GET['class'])) { 
    $result = $opt->getStudent($_GET['class']); 
    // header for JSON 
    header('Content-type: application/json'); 
    // output JSON (need php 5.2 at least) 
    echo json_encode($result); 
} 

添加到ace_beta.php在頁面底部的地方。

<!-- this just in case you are have no jQuery yet. --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     // when you slect new item. 
     $('#class').change(function(){ 
      $.ajax({ 
       // go to url with ?class=ID 
       url: '//get_students.php?class=' + $(this).val(), 
       dataType: 'json' 
       // when all is ok: 
       success: function(data){ 
        var studentsContainer = $('#students'); 
        // empty checkboxes. 
        studentsContainer.html(''); 

        // iterate throug data 
        $.each(data, function(index, item) { 
         // create new checkobx 
         var checkbox = $('<input type="checkbox" name="students[]" />'); 
         // assign value and id for it. 
         checkbox.attr('value', item.id) 
           .attr('id', 'student_' + item.id); 

         // create a label with name inside 
         var label = $('<label />'); 
         label.attr('for', 'student_' + item.id); 
         label.html(item.name); 

         // append all of new elements and "<br />" for readability. 
         studentsContainer.append(checkbox); 
         studentsContainer.append(label); 
         studentsContainer.append('<br />'); 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 

以上的JavaScript將創建下列HTML：

<input type="checkbox" name="students[]" value="1" id="student_1" /><label for="student_1" /><br /> 
<input type="checkbox" name="students[]" value="2" id="student_2" /><label for="student_2" /><br /> 
<input type="checkbox" name="students[]" value="3" id="student_3" /><label for="student_3" /><br /> 

我沒有測試過這一切，但希望這有助於讓你在正確的方向！