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

Rao vặt Đà Nẵng là công cụ mới giúp bạn dễ dàng mang thông tin đến với người xem. Qua đây người dùng có thể đăng tin miễn phí, về các chủ đề như rao vặt, việc làm Đà Nẵng,... lên website mà không phát mất một loại phí nào.

Ý kiến bạn đọc

Bạn cần đăng nhập thành viên để có thể bình luận bài viết này

Bài viết mới hơn