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

Những tin mới hơn

Những tin cũ hơn

Bài viết

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

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

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

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

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

Bài mới

Code mẫu mới nhất

Code hiển thị danh sách 52 tuần của một năm bất kỳ

Tab bootstrap: giữ nguyên active tab khi reload lại trang

Javascript hiện hộp thoại xác nhận khi reload hoặc đóng trình duyệt (tab)

Hàm loại bỏ thẻ p trống trong nội dung

Hàm lấy danh sách tất cả nhóm thành viên

Hàm đóng dấu logo vào ảnh theo cấu hình upload

Chọn tất cả / Bỏ chọn tất cả sử dụng jquery

PHP chuyển chuỗi ký tự về tên tập tin hợp lệ