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

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

Website Gian hàng trực tuyến

Website Đặt phòng khách sạn

Plugin đấu giá sản phẩm cho module shops

Tích hợp xác thực đăng nhập bằng LDAP

Module nghỉ phép

Module đăng ký khóa học

Module rao vặt

Module tin nhắn - hội thoại

Module quản lý công việc

Giao diện bán hàng tổng hợp - shop14

Bài mới

Code mẫu mới nhất