ข้ามไปที่เนื้อหาหลัก

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ CSS Framework

แต่ง 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 เข้ามาช่วยด้วยนะครับ