Share Tuỳ biến select box chuyên nghiệp với thư viện Select2

[filiallion]

Language

Tiếng Việt

Select box mặc định được tạo từ HTML chỉ hỗ trợ tính năng đơn giản đó là cho phép lựa chọn một hoặc nhiều tuỳ chọn mà không có thêm bất kỳ sự hỗ trợ nào khác. Trong nhiều trường hợp, các bạn muốn có thêm tính năng tìm kiếm các tuỳ chọn hoặc nạp các tuỳ chọn từ một API bằng ajax thì select mặc định sẽ không hỗ trợ. Để đáp ứng các trường hợp này, các bạn phải cần tới sự hỗ trợ của các thư viện khác, thường là các thư viện JavaScript và một trong số đó là Select2.

Thư viện Select2 hỗ trợ nhiều tuỳ chọn chức năng như tìm kiếm, nạp các tuỳ chọn bằng ajax, tuỳ biến giao diện select bằng CSS,... Việc sử dụng thư viện Select2 rất đơn giản chỉ với vài dòng mã lệnh JavaScript cài đặt đơn giản. Trước tiên, các bạn cần phải tải thư viện Select2 về tại địa chỉ https://select2.org và tích hợp vào website với nội dung mã lệnh HTML như sau:

<link href="path/to/select2.min.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/select2.min.js"></script>

Tiếp theo, các bạn tạo một select box như ví dụ sau:

<select class="select2">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Bây giờ, các bạn cài đặt thư viện Select2 như ví dụ sau:

$(function() {
    $('.select2').select2();
});

Các bạn có thể tìm hiểu thêm nhiều tuỳ chọn khác của thư viện Select2 tại địa chỉ https://select2.org.