แต่ง select box ให้สวยและค้นหา option ได้ด้วย

วันนี้มีตัวช่วยสร้าง select box ของเราให้เป็นตัวเลือกแบบสวยๆ
และสามารถค้นหา option ด้วยคำที่ต้องการได้ด้วย

ตามไปดูตัวอย่างได้ที่ https://select2.github.io/examples.html

ถ้าให้แนะนำคงจะเป็นส่วนของการเพิ่ม "Placeholders" และ สามารถเคลียร์ค่าได้ด้วย allowClear ซึ่งจะต้องสร้าง option เปล่าๆไว้ 1 ตัว จะทำให้ปรากฏเครื่องหมายกากบาท สำหรับล้างค้าที่เลือกไปแล้วได้ด้วย

สำหรับวิธีติดตั้งก็ดูที่หน้า "Home" ได้เลยครับ https://select2.github.io/

ไฟล์ที่ต้องการก็มี select2.min.css

และสคริปต์ select2.min.js

ส่วนการเรียกใช้ก็ง่ายๆ

<script type="text/javascript">
  $('select').select2();
</script>

สำหรับการปรับแต่งเพิ่มเติมก็ดูตาม https://select2.github.io/options.html หรือแกะไปตาม Examples เอาละกันนะครับว่าเรียกใช้ยังไงบ้าง

และที่สำคัญหากนำมาใช้แล้วแสดงผลแล้วไม่เหมือนตัวอย่าง อาจจะเป็นเพราะต้องใช้ไฟล์ bootstrap และสัญลักษณ์ต่างๆจาก font-awesome เข้ามาช่วยด้วยนะครับ

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล ตาราง tb_room สร้างตารางรายชื่อห้องประชุม สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่ -- -- Database: `tobedev_example` -- -- -------------------------------------------------------- -- -- Table structure for table `tb_room` -- CREATE TABLE IF NOT EXISTS `tb_room` ( `id` int(11) NOT NULL, `name` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- -- Dumping data for table `tb_room` -- INSERT INTO `tb_room` (`id`, `name`) VALUES (1, 'ห้องประชุม 1'), (2, 'ห้องประชุม 2'), (3, 'ห้องประชุม 3'), (4, 'ห้องประชุม 4'), (5, 'ห้องประชุม 5'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tb_room` -- ALTER TABLE `tb_room` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tb_room` -- ALTER TABLE `tb_room` MODIFY `i...

การดึงข้อมูล MySQL มาแสดงในปฏิทิน Fullcalendar ด้วย PHP

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) { echo "Error: Unable to connect to MySQL." . PHP_EOL; echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL; echo "Debugging error: " . mysqli_connect_error() . PHP_EOL; exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) { /* fetch object array */ while ($obj = $result->fetch_object()) { $data[] = array( ...

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้