สวัสดีครับ วันนี้มานำเสนอการเขียนโปรแกรม แบบ dynamic dropdown คือเมื่อ ทำการเลือก dropdown ชั้นที่ 1 dropdown ชั้นที่ 2 จะถูกดึงข้อมูลตาม id ที่ dropdown ขั้นที่ 1 ยกตัวอย่างเช่น เราเลือกจังหวัด ปทุมธานี(Dropdown 1) แล้ว อำเภอจะแสดงข้อมูลอำเภอเฉพาะที่อยู่ในจังหวัดปทุมธานี(Dropdown 2) แต่ตัวอย่างนี้ มี Dropdown ถึง 3 ชั้นเลย ก็คือ เป็นที่มาของตัวอย่างการเลือก จังหวัด, อำเภอ, ตำบล และ รหัสไปรษณีย์ นั้นเอง
โดยวันนี้เราจะใช้ภาษา PHP และ javascript(jQuery) ในการทำงานนั้นเอง โดยใช้เทคนิค AJAX ตอนดึงข้อมูลมาใส่ใน dropdown 2, 3 เดี่ยวมาดูกันว่าเขียนอย่างไรบ้างในบทความนี้
วิธีการเขียน Multiple Dropdown
- ทำการ import database ของฐานข้อมูล จังหวัด, อำเภอ, ตำบล ลงในฐานข้อมูลก่อน ดาวน์โหลดได้ที่
https://github.com/ipball/multiple_dropdown2025/blob/main/multiple_dropdown.sql - ทำการสร้างไฟล์ conect.php เพื่อเชื่อมต่อกับฐานข้อมูล
3. สร้างไฟล์ index.php เพื่อทำหน้าจอ dropdown จังหวัด, อำเภอ, ตำบล และ ช่อง input text รหัสไปรณีย์
อธิบายโค๊ด
บรรทัดที่ 2 include ไฟล์เพื่อเชื่อมต่อฐานข้อมูล
บรรทัดที่ 4-10 ดึงข้อมูลจากตารางจังหวัด แล้ววนข้อมูลเก็บใส่ตัวแปร $provinces เพื่อที่จะนำไปวนลูปใน dropdown
บรรทัดที่ 28-35 เป็น dropdown ของจังหวัด นำตัวแปรจาก บรรทัดข้างบนมา วนแสดงผล จังหวัด
บรรทัดที่ 37-52 เป็นฟอร์มของ อำเภอ, ตำบล, รหัสไปรษณีย์ ยังไม่มีค่าใดๆ เพราะต้องรอให้เลือก dropdown จังหวัดก่อน ในส่วนนี้
บรรทัดที่ 56-57 include ไฟล์สำคัญคือ jquery มาใส่งาน, และไฟล์ script.js เป็นไฟล์ที่เราจะเขียนขึ้นเพื่อหาจังหวะตอนเลือกเปลี่ยน ค่า dropdown
4. สร้างไฟล์ script.js เพื่อจับเหตุการ์ณและดึงข้อมูลแสดงผล อำเภอ, ตำบล, รหัสไปรษณีย์
อธิบายโค๊ด
บรรทัดที่ 2-24 เมื่อมีการเปลี่ยนแปลง dropdown จังหวัด จะทำการ reset ค่าของ อำเภอ, ตำบล, รหัสไปรษณีย์ แล้วทำการดึงข้อมูลอำเภอ ตามจังหวัดที่เลือกใน dropdown นั้น ด้วย jquery AJAX จากไฟล์ get_districts.php (เราจะสร้างทีหลัง) ซึ่งพอเราดึงค่าข้อมูลจากไฟล์ได้แล้วจะได้ข้อมูล รุปแบบ JSON ให้เราทำการวนข้อมูลแล้ว ลูปอำเภอ นำมาใส่ใน element dropdown ของอำเภอ
บรรทัดที่ 26-47 เมื่อเปลี่ยนแปลง dropdown อำเภอ ทำการ reset ค่า ตำบล, รหัสไปรษณีย์ แล้วดึงข้อมูลตำบล ตามอำเภอที่เลือก ด้วย jquery AJAX จากไฟล์ get_subdistricts.php แล้วเอาข้อมูลที่ได้รับเป็น JSON วนลูปใส่ใน dropdown ตำบล
บรรทัดที่ 49-52 เมื่อมีการเปลี่ยนแปลง ตำบล เราจะเอาข้อมูลรหัสไปรษณีย์ที่อยู่ data-postcode มาใส่ในช่องรหัสไปรษณีย์
5. สร้างไฟล์ get_districts.php เพื่อดึงข้อมูลอำเภอตามจังหวัดที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON
6. สร้างไฟล์ get_subdistricts.php เพื่อดึงข้อมูลตำบลตามอำเภอที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON
เพียงเท่านี้เราก็ได้ Multiple Dropdown List แบบหลายชั้นแล้ว เดี่ยวเราลองมาดูผลลัพท์กัน
สำหรับ Source code Multiple Dropdown List โดยใช้ PHP, MySQL, Javascript(Jquery) สามารถดาวน์โหลดได้ที่ลิงค์ด้านล่าง
ดาวน์โหลด Source Code กดตรงนี้
