1.  

Select2 - Thư viện Jquery thay thế hộp chọn mặc định

Thứ ba - 23/08/2016 03:43
Select2 cung cấp cho chúng ta một chộp chọn (SelectBox) tùy biến hỗ trợ cho việc tìm kiếm, gắn thẻ, thay đổi dữ liệu động và rất nhiều tùy chọn khác.

1. Một số chức năng nổi bật của Select2

  • Hỗ trợ môi trường RTL, tìm kiếm có dấu và hơn 40 ngôn ngữ 
  • Hỗ trợ dữ liệu động: Sử dụng AJAX để hiển thị và chọn từ một CSDL lớn 
  • Hỗ trợ đa giao diện: Sử dụng giao diện tùy biến, các lớp css xây dựng trên Sass và bootstrap.
  • Tạo danh sách động: Cho phép người dùng thêm vào một danh sách mới
  • Hỗ trợ đầy đủ các trình duyệt: Họat động trên các loại trình duyệt mới nhất, bao gồm cả IE8.
Xem thêm các ví dụ để xem đầy đủ hơn về các tùy chọn https://select2.github.io/examples.html
 
chọn địa điểm với select2
Chọn địa điểm với Select2

2. Bắt đầu với Select2

Để sử dụng select2, bạn cần thêm vào mã nguồn của bạn thư viện select2, bao gồm Javascript và CSS. Bạn hãy sử dụng một trong hai phương án bên dưới để thêm thư viện select2.

Phương án 1: Sử dụng select2 từ CDN

1. Thêm vào giữa cặp thẻ đoạn mã dưới đây: 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
2. Sử dụng select2 
<script type="text/javascript">
  $('select').select2();
</script>
3. Xem trang ví dụ để sử dụng thêm các tùy chọn khác https://select2.github.io/examples.html

Phương án 2: Tải thư viện về máy chủ của bạn

1. Truy cập https://github.com/select2/select2/tags và tải về phiên bản select2 mới nhất. Sau khi giải nén, copy hai tập tin select2.min.css và select2.min.js vào thư mục chứa các thư viện Jquery trên dự án của bạn.
2. Đặt đoạn mã dưới đây vào giữa cặp thẻ <head></head> 
<link href="path/to/select2.min.css" rel="stylesheet" />
<script src="path/to/select2.min.js"></script>
3. Sử dụng select2 
<script type="text/javascript">
  $('select').select2();
</script>
4. Xem trang ví dụ để sử dụng thêm các tùy chọn khác https://select2.github.io/examples.html

 Từ khóa: jquery, selectbox, select2

Tổng số điểm của bài viết là: 10 trong 2 đánh giá

Xếp hạng: 5 - 2 phiếu bầu
Click để đánh giá bài viết

Những tin mới hơn

Ckeditor - Hướng dẫn cài đặt plugin upload ảnh lên dịch vụ chia sẽ ảnh imgur
Copy văn bản từ MS Word vào ckeditor không làm mất định dạng

Những tin cũ hơn

Lightbox popup đơn giản sử dụng jquery và bootstrap

Sản phẩm nổi bật

Bài mới

Code mẫu mới nhất

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Sử dụng CMS NukeViet, thiết kế bởi TDFOSS.,LTD

Thủ thuật Android | hosting nukeviet | module nukeviet | cùng bạn làm đẹp | thiết kế website tại Quảng Trị