สวัสดีครับ ในบทความนี้จะแสดงการทำงานของ Select2 ซึ่งเป็น Plugin ที่ใช้งานร่วมกับ Select Box หรือ Select/Option ที่จะช่วยอำนวยความสะดวกเมื่อข้อมูลมีจำนวนมาก เพราะสามารถเลือกแบบปกติได้ และสามารถค้นหาข้อมูลใน option ตามที่ต้องได้อีกด้วย อีกทั้งยังตกแต่งให้สวยงามทันสมัยด้วย bootstrap5 ศึกษาไว้ครับ เผื่อได้ใช้




ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.เว็บบริษัท / เว็บองค์กร คลิก
5.ระบบหอพัก โปรแกรมหอพัก คลิก
6.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
7.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
8.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
9.ระบบสอบออนไลน์ คลิก
10.ระบบอื่นๆ เพิ่มเติม คลิก

คลิปการทำงาน

 

Full Code สามารถ Save เป็น .html แล้วรันได้เลยครับ

*ตัวอย่าง code ชุดนี้เหมาะกับข้อมูลที่มีมากกว่า 10 rows เป็นต้นไปนะครับ ถ้าน้อยกว่านี้ไม่จำเป็นต้องใช้ select2 ใช้ select/option ธรรมดาก็พอครับจะได้ไม่หนักเครื่อง เพราะว่าใน tag head มีการเรียกใช้งาน js ค่อนข้างเยอะครับ

การนำไปต่อยอด ศึกษาการเรียกข้อมูลจากตาราง (Database) มาแสดงใน select/option ได้ที่ https://devbanban.com/?p=4429

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม
Bootstrap5 : https://getbootstrap.com/
ฝึก SQL :  https://www.w3schools.com/sql/default.asp
แหล่งศึกษา PDO เพิ่มเติม : https://websitebeaver.com/php-pdo-vs-mysqli
List of PDOStatement::bindParam data_type parameters : https://www.php.net/manual/en/pdo.constants.php


ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี   เลขที่  878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

(Visited 349 times, 25 visits today)