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

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

update บทความที่เกี่ยวข้องและปรับปรุงใหม่

ตอนนี้มีบทความ การทำ listbox/dropdown แบบ 3 ชั้นแล้ว ละเอียดกว่าเดิม คลิกเพื่อดู

เพื่อให้เห็นภาพลองดูตัวอย่าง ได้ที่นี้ 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 ด้านล่างบทความได้เลยครับ

You May Also Like

About the Author: benext

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

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

25 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
am
am
8 years ago

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

gig
gig
7 years ago

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

gig
gig
Reply to  benext
7 years ago

ได้แล้วค่ะ ขอบคุณมากๆค่ะ ^^

Shonan36
Shonan36
7 years ago

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

fun
fun
7 years ago

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

sintana
sintana
7 years ago

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

————–
‘มกราคม’, ’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มา แล้ว เดือนมกราคม รันอัตโนมัติ จะทำได้ไหมครับ (แต่ละเดือนมีของมูลที่จะแสดง ตอนนี้ต้องคลิกเลือกเดือนถึงจะแสดง) อยากให้มันแสดงอันโตมัน รบกวนหน่อยครับ

bee
bee
7 years ago

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

วุฒิชัย
วุฒิชัย
6 years ago

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

วุฒิชัย
วุฒิชัย
Reply to  วุฒิชัย
6 years ago

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

newyear
6 years ago

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

jirapa
6 years ago

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

BiGsK
BiGsK
6 years ago

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

kaewchai
kaewchai
5 years ago

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

arm
arm
4 years ago

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

จันทร์จิรา
จันทร์จิรา
3 years ago

พี่ค้ะ ถ้าสร้างมากกว่า 2 box ทำอย่างไรค้ะ มีตัวอย่างไหมค่ะ ช่วยหน่อยค่ะ ต้องส่งโปรเจคสิ้นเดือนนี้แล้วค่ะ :'(

ittiphon
2 years ago

ถ้าจะเอาข้อมูลใน option ที่เราเลือกส่งค่าไปบันทึกใน database ต้องเขียนโค้ดแบบไหนครับ

สมมุติ ผมเลือก กีฬา—วิ่ง
ผมอยากจะบันทึก คำว่า กีฬา—วิ่ง เข้าไปในตาราง database ผมต้องเขียนโค้ดยังไงครับ

pp
pp
10 months ago

ช่องข้อมูลตรงหมวดหมู่สามารถเลือกได้ค่ะแต่ช่องแสดงสินค้าไม่มีข้อมูลเลยค่ะ