Multi Select : Jquery + Ajax [Course,Type,Major]

Posted by Mix 2016-05-01 23:20:00 View: 1071

Multi Select : Jquery + Ajax [Course,Type,Major]

สวัสดีครับ ผมวันนี้ผมจะมาสอน ไม่สิ มาดู Code กัน ^^  แถมไฟล์ด้วยน่ะ ฮ่า ๆ 

เรามาเข้าเรื่องกันดีกว่า ;)

 

 

โอเค เรามาเข้าเรื่องกันดีกว่าครับ สิ่งที่เราจะต้องเตรียมคือไฟล์ Bootstrap จะประกอบไปด้วย 

  • css
    • bootstrap.min.css
  • js
    • bootstrap.min.js
  • check_course.php
  • check_major.php
  • index.php

ผมใช้ Bootstrap เวอร์ชั่น 3.3.6

สร้างไฟล์ index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multi Select : Jquery + Ajax</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
      body{
        background-color: #A9C3B1; 
      }
    </style>
  </head>
  <body>
    
    <div class="container">
      <h1>Multi Select : Jquery + Ajax [Course,Type,Major]</h1>
      <hr>
      <form>
       <div class="form-group">
        <label>Course </label>
         <select class="form-control" name="course" id="course-list" onChange="getCourse(this.value);">
          <option value="">-- Select Course --</option>
            <?php
              $pdo = Database::connect();
              $sql = "SELECT * FROM `course` ORDER BY `course_id` ASC";
              foreach ($pdo->query($sql) as $row){  
                echo '<option value='.$row['course_id'].'>'.$row['course_name'].'</option>';
              }
              Database::disconnect();
            ?>  
          </select>
        </div>

        <div class="form-group">
          <label>Type</label>
          <select class="form-control" name="type" id="course-type-list" onChange="getCourseType(this.value);"></select>
        </div>

        <div class="form-group">
          <label>Major</label>
          <select class="form-control" name="major" id="course-major-list"></select>
        </div>
      </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
   
  </body>
</html>

จากนั้นสร้าง Script 

      function getCourse(val) {
        $.ajax({
        type: "POST",
        url: "check_course.php",
        data:'course_id='+val,
        success: function(data){
          $("#course-type-list").html(data);
          }
        });
      }

      function getCourseType(val) {
        $.ajax({
        type: "POST",
        url: "check_major.php",
        data:'course_type_id='+val,
        success: function(data){
          $("#course-major-list").html(data);
          }
        });
      }

จาก Scirpt ได้ทำการเรียกหาไฟล์ ที่ ชื่อว่า check_course.php

ดังนั้น ให้เราสร้างไฟล์ชื่อว่า check_course.php

<?php
if(!empty($_POST["course_id"])) {
    $course_id = $_POST['course_id'];
?>
    <option value="0">-- Select Type --</option>
<?php
       $pdo = Database::connect();
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $sql = "SELECT * FROM `register_type`,`type` WHERE `register_type`.`type_id` = `type`.`type_id` AND `course_id` = ?";
            $q = $pdo->prepare($sql);
            $q->execute(array($course_id));
   while ($row = $q->fetch(PDO::FETCH_ASSOC)) {
    echo '<option value='.$row['type_id'].'>'.$row['type_name'].'</option>';
    }
       Database::disconnect();
?>

และไฟล์ check_major.php

<?php
if(!empty($_POST["course_type_id"])) {
    $course_type_id = $_POST['course_type_id'];
?>
    <option value="0">-- Select Type --</option>
<?php
    $pdo = Database::connect();
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "SELECT * FROM `register_major`,`major` WHERE `register_major`.`major_id` = `major`.`major_id` AND `type_id` = ?;";
    $q = $pdo->prepare($sql);
    $q->execute(array($course_type_id));
   while ($row = $q->fetch(PDO::FETCH_ASSOC)) {
    echo '<option value='.$row['major_id'].'>'.$row['major_name'].'</option>';
    }
       Database::disconnect();
}
?>

วิธีเชื่อมต่อ Database ตาม link นี้เลยน่ะครับ ด้านล่างน่ะครับ ^^

ลองทำตามดูน่ะครับ ^^ 

ตัวอย่าง ดาวน์โหลดไฟล์