กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery

การกำหนดรายการ Listbox ที่ 2 โดยเงื้อนไขจากการเลือก Listbox ที่ 1 หรือ Dropdown สามารถนำไปประยุกต์ใช้งานได้อย่างหลากหลายเช่น การทำ Listbox (Dropdown) จังหวัด – อำเภอ โดยเมื่อมีการเลือก Listbox (Dropdown) จังหวัด แล้ว Listbox (Dropdown) อำเภอ จะแสดงรายการอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น โดยบทความนี้จะใช้ PHP, Javascript (jQuery) โดยใช้เทคโนโลยีของ Ajax เป็นตัวอย่าง และใช้ฐานข้อมูล MySQL

เพื่อให้เห็นภาพลองดูตัวอย่าง ได้ที่นี้ Demo

1. นำ script sql ด้านล่างนี้ไป run ใน phpmyadmin

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE IF NOT EXISTS `ml_categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'รหัส',
  `categorie_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT 'ชื่อกลุ่ม',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

--
-- Dumping data for table `ml_categories`
--

INSERT INTO `ml_categories` (`id`, `categorie_name`) VALUES
(1, 'เครื่องใช้ไฟฟ้า'),
(2, 'กีฬา'),
(3, 'อสังหาริมทรัพย์');

-- --------------------------------------------------------

--
-- Table structure for table `ml_products`
--

CREATE TABLE IF NOT EXISTS `ml_products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `categories_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `categories_id` (`categories_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

--
-- Dumping data for table `ml_products`
--

INSERT INTO `ml_products` (`id`, `product_name`, `categories_id`) VALUES
(1, 'โทรทัศน์', 1),
(2, 'โปรเจ็กเตอร์', 1),
(3, 'เครื่องเล่นและบันทึก DVD', 1),
(4, 'เครื่องเสียง', 1),
(5, 'อุปกรณ์ซักผ้า', 1),
(6, 'กอลฟ์', 2),
(7, 'เทนนิส', 2),
(8, 'บาสเก็ตบอล', 2),
(9, 'วิ่ง', 2),
(10, 'เบสบอล & ซอฟท์บอล', 2),
(11, 'แบดมินตัน', 2),
(12, 'บ้าน', 3),
(13, 'ทาวน์เฮ้าส์', 3),
(14, 'คอนโดมีเนี่ยม', 3),
(15, 'ตึกแถว', 3);

--
-- Constraints for dumped tables
--

--
-- Constraints for table `ml_products`
--
ALTER TABLE `ml_products`
  ADD CONSTRAINT `ml_products_ibfk_1` FOREIGN KEY (`categories_id`) REFERENCES `ml_categories` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;

ในฐานข้อมูลนี้มี 2 ตารางคือ ตารางหมวดหมู่(ml_categories) และตารางสินค้า(ml_products)

2. หลักจากที่ Run script ในการสร้างตาราง categorie และ product มาแล้วต่อไปจะเป็นการเขียนไฟล์ show.php กันครับ ดู Code ด้านล่างได้เลยครับ

<?php
/*
 * connection database
 */
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');

/*
 * select data
 */
$Query = mysql_query('SELECT * FROM ml_categories') or die('Error query #12');
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>itOffside.com</title>
        <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#categories').change(function() {
                    $.ajax({
                        type: 'POST',
                        data: {categories: $(this).val()},
                        url: 'select_product.php',
                        success: function(data) {
                            $('#products').html(data);
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body style="width: 100%;padding-top: 50px;">
        <form name="multilistbox" method="POST">
            <table border="0" width="500" cellpadding="5" style="margin: 0 auto;">
                <tr>
                    <td style="text-align: right; width: 200px;">หมวดหมู่</td>
                    <td>
                        <select name="categories" id="categories">
                            <option value="">เลือกข้อมูลหมวดหมู่</option>
                            <?php
                            while ($Result = mysql_fetch_array($Query)) {
                                ?>
                                <option value="<?php echo $Result['id']; ?>">
                                    <?php echo $Result['categorie_name']; ?>
                                </option>
                                <?php
                            }
                            ?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">สินค้า</td>
                    <td>
                        <select name="products" id="products"></select>
                    </td>
                </tr>
            </table>
        </form>     
    </body>
</html>

เพิ่มเติมไฟล์ jquery สามารถ ดาวน์โหลดได้ที่นี้ jquery

จาก code ด้านบนผมอธิบายไล่ตามบรรทัดดังนี้ครับ
บรรทัดที่ 5-7 : เป็นใช้ฟังก์ชั่นการเชื่อมต่อฐานข้อมูล MySQL พร้อมกำหนดอักขระ UTF8
บรรทัดที่ 12 : ฟังก์ชั่น Query? SELECT ข้อมูลหมวดหมู่สินค้าหรือตาราง categories นั้นเอง
บรรทัดที่ 19 : include ไฟล์ jquery เวอร์ชั่น 1.11.1
บรรทัดที่ 20-34 : เป็นการเขียน jquery เพื่อร้องขอ(Request)ข้อมูล SERVER ผ่าน AJAX โดยถ้ามีการเกิดเหตุการณ์(event) ของการเปลี่ยนแปลง Listbox หรือ Dropdown ของหมวดหมู่จะทำให้มีการส่งข้อมูล categorie_id แบบ POST? ไปยังไฟล์ select_product.php ซึ่งไฟล์ select_product.php นี้เองที่ทำหน้าในการ Select ข้อมูลสินค้า (products) ตามหมวดหมู่ แล้วตอบกลับ(Response)โดยการส่งข้อมูลที่ได้จากการ Select กลับไปยังไฟล์ show.php
บรรทัดที่ 37-63 : เป็นฟอร์ม Listbox หรือ Dropdown
สรุป ส่วนสำคัญของไฟล์นี้คือการ include ไฟล์ jquery การใช้งาน jquery ajax ให้ติดต่อไปยัง SERVER และ การอ้างอิง Element ID ให้เชื่อมโยงกัน

 

3. เขียนไฟล์ select_product.php ในการ Select ข้อมูลสินค้าตามการเลือก Listbox หรือ Dropdown

<?php

/*
 * connection database
 */
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
/*
 * check POST
 */
$categorie_id = isset($_POST['categories']) ? $_POST['categories'] : "";
$Query = mysql_query("SELECT * FROM ml_products WHERE categories_id='{$categorie_id}'");
$Rows = mysql_num_rows($Query);
if ($Rows > 0) {
    while ($Result = mysql_fetch_array($Query)) {
        echo "<option value=\"" . $Result['id'] . "\">" . $Result['product_name'] . "</option>";
    }
}else{
    echo "<option value=\"\">ไม่มีสินค้าในหมวดหมู่ที่เลือก</option>";
}

อธิบาย Code ของไฟล์ select_product.php
บรรทัดที่ 12 : เช็คค่าตัวแปร $_POST[‘categories’] ซึ่งตัวแปรที่ส่งมาจากไฟล์ show.php นั้นเองโดยตัวแปรเป็น TYPE POST โดยเก็บค่าไว้ในตัวแปร $categorie_id
สรุป มีการ Select ข้อมูลจากตาราง ml_product โดยใช้เงื้อนไข categories_id=’$categorie_id‘ หมายถึงดึงเฉพาะข้อมูลตามหมวดหมู่ที่เลือกในหน้า show.php นั้นเอง

ผลลัพธ์ที่ได้

กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery
รูปภาพก่อนเปลี่ยนหมวดหมู่
รูปภาพหลังเปลี่ยนหมวดหมู่
รูปภาพหลังเปลี่ยนหมวดหมู่

 

สำหรับบทความนี้ก็มีเพียงเท่านี้ครับหากใครมีข้อสงสัยหรือปัญหา สอบถามได้ที่ comment ด้านล่างบทความได้เลยครับ

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

20 Comments

  1. คำสั่งที่ใช้ในการคืนค่ากลับมาที่ไฟล์ show คือตรงไหนคะ

    1. ใช้ ajax ในการรับ-ส่งข้อมูล ส่วนขั้นตอนที่รับค่าข้อมูลอยู่ในไฟล์ show.php บรรทัดที่ 27 หมายถึงเอาค่าที่ได้จากไฟล์ select_product.php มาไว้ภายใต้ tag id ของ product ซึ่งก็คือ Tag select นั้นเอง

  2. ถ้าต้องการเพิ่มเงื่อนไข listbok มากกว่า2ล่ะค่ะ
    สมมติว่า เลือกหมวดหมู่ > เลือกสินค้า > เลือกดูdetailของสินค้าที่เลือก
    จะต้องเขียนประมาณไหนค่ะ พอจะมีโค้ดตัวอย่างมั่ยค่ะ ขอบคุณล่วงหน้าค่ะ

    1. 1. เพิ่ม listbox ของรายละเอียดสินค้า ชื่อ detail_product
      2. สร้างไฟล์ค้นหา detail_product คล้ายกับ select_product.php โดยประยุกต์ใช้ครับ
      3. เขียน event ใน jquery เพิ่มครับ เช่น $(?#products?).change(function()

      คร่าวๆ ครับ

  3. พี่ครับสอบช่วยหน่อยครับคือ ถ้าผมจะให้เลือกselect อันแรก เเล้วโชว์ข้อมูลที่ select ที่2 แล้วส่งค่าselect ที่2 บันทึกต้องเพิ่มตรงไหนอ่าครับ ผมลองบันทึกดูมันบอกselect2 เป็นค่าว่างอ่ะครับ

  4. ในกรณีที่เป็นหน้าปรับปรุงข้อมูล จะเขียนคำสั่งยังไงให้ dropdown โชว์ตามที่เลือกไว้ก่อนหน้านี้คะ ในกรณีที่ใช้แบบนี้อ่ะค่ะ

  5. ตารางรถ เดือน

    ————–
    ‘มกราคม’, ’02’ => ‘กุมภาพันธ์’, ’03’ => ‘มีนาคม’, ’04’ => ‘เมษายน’,
    ’05’ => ‘พฤษภาคม’, ’06’ => ‘มิถุนายน’, ’07’ => ‘กรกฎาคม’, ’08’ => ‘สิงหาคม’,
    ’09’ => ‘กันยายน ‘, ’10’ => ‘ตุลาคม’, ’11’ => ‘พฤศจิกายน’, ’12’ => ‘ธันวาคม’);
    $txtMonth = isset($_POST[‘txt_month’]) && $_POST[‘txt_month’] != ” ? $_POST[‘txt_month’] : date(‘m’);
    foreach($month as $i=>$mName) {
    $selected = ”;
    if($txtMonth == $i) $selected = ‘selected=”selected”‘;
    echo ”. $mName .”.”\n”;
    }
    ?>

    ******************************************************
    ผมอยากให้เปิดหน้าindexมา แล้ว เดือนมกราคม รันอัตโนมัติ จะทำได้ไหมครับ (แต่ละเดือนมีของมูลที่จะแสดง ตอนนี้ต้องคลิกเลือกเดือนถึงจะแสดง) อยากให้มันแสดงอันโตมัน รบกวนหน่อยครับ

  6. คือ นำ script sql ด้านล่างนี้ไป run ใน phpmyadmin ขั้นตอนรันยังงัย
    มันต้องสร้างดาต้าในฐานข้อมูลยังงัย ติดตรงนี้

  7. มือใหม่ครับ ผมลอง copy แล้วทำตามทั้งหมดแล้ว แต่ว่าผลที่ได้ เลือก หมวดหมู่แล้ว ในช่องแสดงสินค้าไม่มีแสดงออกมาครับ ต้องแก้ตรงไหนช่วยบอกผมที ขอบคุณครับ

    1. ผมไล่ดูโค๊ดอีกทีเจอแล้วแก้ไข ใช้ได้แล้วครับ ขอบคุณครับ

  8. ถ้าต้องการแสดงรูปภาพสินค้า โดยดึงรูปภาพจากโฟลเดอร์มาแสดง
    สมมติ : เลือกหมวดหมู่> เลือกสินค้า> กดปุ่ม submit แล้วแสดงรูป
    โดยเก็บที่อยู่ของรูปภาพเก็บไว้ใน ml_product (`id`, `product_name`, `categories_id`, `address_pic`)
    จะต้องเขียนประมาณไหนค่ะ ช่วยแนะนำหน่อยค่ะ พอจะมีโค้ดตัวอย่างมั้ยค่ะ ขอบคุณค่ะ

  9. สวัสดีค่ะ พอดีอยากทราบการแก้ไข option เมื่อเราเลือกสินค้าและบันทึกลงฐานข้อมูลและ อยากจะแก้ไขข้อมูลสินค้าที่บันทึกไปแล้วค่ะ เขียนเหมือนกันหรือ ป่าว

  10. ขอบคุณมากครับ เป็นความรู้ที่ดีมากๆ

  11. มีเจอ code นี้ สามารถนำไปประยุกต์ใช้ในสิ่งที่ต้องการ แล้วได้ผล ขอบคุณมากๆ ครับ

  12. ทำตามแล้ว แต่ค่าที่เรา select มันไม่เห็นมาเลยอ่ะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.