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

Share Button

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

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

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

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

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

เพิ่มเติมไฟล์ 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

อธิบาย 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 ด้านล่างบทความได้เลยครับ

benext About benext

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

Share Button

Published by

benext

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

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

  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 นี้ สามารถนำไปประยุกต์ใช้ในสิ่งที่ต้องการ แล้วได้ผล ขอบคุณมากๆ ครับ

Leave a Reply

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