สวัสดีครับ ในบทความนี้จะแสดงการทำงานของ 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 ค่อนข้างเยอะครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Select2 HTML by devbanban.com 2022</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> </head> <body> <div class="container" style="margin-top: 20px;"> <div class="row"> <div class="col-md-12"> <form action="https://devbanban.com/?p=2867" method="post" class="form-horizontal"> <div class="form-group row"> <h4>Select2 Bootstrap5 by devbanban.com</h4> <div class="col-sm-8"> <select class="form-control select2"> <option value="">-เลือกตำแหน่งงาน</option> <option value="1">อาจารย์</option> <option value="2">เจ้าหน้าที่บริหารงานทั่วไป</option> <option value="3">นักวิชาการศึกษา</option> <option value="4">เจ้าหน้าที่พัสดุ</option> <option value="5">นักวิชาการคอมพิวเตอร์</option> </select> </div> <div class="col-sm-1"> <button type="submit" class="btn btn-primary btn-sm">submit</button> </div> </div> <!-- /.form-group --> </form> </div> <!-- /.col --> </div> <!-- /.row --> </div> </body> </html> <script> $(document).ready(function() { $('.select2').select2({ closeOnSelect: false }); }); </script> <!-- ศึกษาการเรียกข้อมูลจากตาราง (Database) มาแสดงใน select/option ได้ที่ https://devbanban.com/?p=4429 ศึกษาเพิ่มเติมได้ที่ https://select2.org/ https://bbbootstrap.com/snippets/select2-option-cdn-31353331 --> |
การนำไปต่อยอด ศึกษาการเรียกข้อมูลจากตาราง (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/