Select2 เป็นเครื่องมือที่ใช้ jQuery ในการเปลี่ยน select box ให้กลายเป็น element ต่างๆ เพื่อให้เราสามารถกำหนดรูปแบบลงไปได้อย่างละเอียดมากกว่า เนื่องจาก html select box และ css ยังไม่รองรับการปรับแต่งใดๆมากนักในขณะนี้.
ขอให้เปิดหน้าทดสอบที่ผมได้ทำไว้ได้เลยครับ
ทดสอบ
จากหน้านี้ได้แสดงตัวอย่างทั้ง select box แบบตัวเลือกเดียวและหลายตัวเลือก แล้วก็สร้าง select box อีกมากมายสำหรับรัน Select2 โดยใช้ option ต่างๆที่ควรจะต้องทดสอบ เช่น ฟังก์ชั่นพื้นฐาน (ไม่กำหนดอะไรเลย), ซ่อนกล่องค้นหา, ทดสอบอัพเดท option เพิ่มเติม, ทดสอบการแสดงผลขณะที่ select box อยู่ภายใน element ที่กำหนดความสูงไว้แล้ว overflow: hidden;, ทดสอบ responsive, ทดสอบการทำงานในแท็บที่ไม่ถูกแอ็คทีฟ, ทดสอบทำงานใน modal dialog, ทดสอบ event ต่างๆ, ทดสอบการทำงานกับฟอร์มจริงๆ
ผลการทดสอบ
จากที่เคยใช้งานมา พบว่าพวก javascript อะไรก็ตามที่แปลง select box นั้นจะมีปัญหาเหมือนๆกัน นั่นคือการที่ไม่สามารถกำหนดการแสดงผลใน element ที่ถูกซ่อนเอาไว้ได้ เช่น อยู่ในหน้าแท็บที่ยังไม่ได้ถูกแอ็คทีฟ. ส่วน Select2 นั้นจะต่างออกไปนิดหน่อยจาก Chosen คือของ Chosen นั้นจะไม่แสดงอะไรเลย จะเป็น select box ที่ลีบๆหรือไม่มีอะไรเลย ส่วนของ Select2 นั้นจะกำหนดความกว้างไว้ที่ 100 pixels คือดีกว่านิดเดียว.
การแก้ปัญหานี้ของทุกเจ้าจะทำเหมือนๆกันคือกำหนด width ใน css แล้วใส่ !important
การทดสอบอัพเดท option เพิ่มเติม หรือ dynamic update นั้นพบว่าทำได้ดีและง่ายกว่า Chosen มากมายหลายเท่านัก คือไม่ต้องไปเรียก trigger ใดๆทั้งสิ้น.
การทดสอบภายใน element ที่ overflow: hidden; ก็พบว่ามันแสดงผลได้โดยที่ option list นั้นไม่ถูกตัดออกเลย.
การทดสอบ event ต่างๆก็พบว่ามีมากพอ แล้วการรับค่าจาก select box ก็ใช้แค่ $('select').val(); ได้เลยทันที.
การทดสอบทำงานกับฟอร์มจริงๆ พบว่า ปุ่ม reset <button type="reset">Reset</button> ไม่สามารถล้างค่า select box ออกได้เลย และการกำหนด option allowClear สำหรับมีปุ่มล้างคาภายใน select box ก็ต้องใช้ร่วมกับ option placeholder ซึ่งค่อนข้างวุ่นวายและไม่ยืดหยุ่นพอกับงานบางอย่าง.
ด้วยเหตุนี้ในหน้าทดสอบ ผมจึงได้สร้าง function ขึ้นมาเพื่อล้างค่า select box ที่ Select2 สร้างไว้โดยเฉพาะ มันจึงดูเหมือนทำงานได้ปกติ.
หากคุณได้ทำการทดสอบดูด้วยตัวเองแล้ว จะเลือกใช้อะไรนั้นก็ขอให้ตัดสินใจเลือกตามวิจารณญาณของตนเองเลยครับ เพราะต่างก็มีข้อดีข้อด้อยต่างกัน การยอมรับข้อด้อยของแต่ละคนก็ต่างกัน.
ดาวน์โหลด ขอเชิญดาวน์โหลดไฟล์ตัวอย่างทดสอบได้ที่นี่ หรือ Download Select2 เพื่อนำไปใช้งาน