Đã đăng vào thg 9 27, 2015 2:34 SA 1 phút đọc

14.2K

Sử dụng Select2 để thay thế select boxes

Bài đăng này đã không được cập nhật trong 8 năm

Select2 là công cụ khá tốt để tùy biến select box, nó hỗ trợ việc tìm kiếm, tagging, lấy dữ liệu từ nguồn khác ... Để sử dụng Select2, bạn cần chèn file JavaScript và CSS của nó vào trang web của bạn. Bạn có thể tải chúng về từ đây https://github.com/select2/select2/tags , copy vào thư mục dist và include chúng vào thẻ <head> trên trang HTML của bạn.

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

Hoặc có thể sử dụng qua CDN

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

Hoặc cũng có thể sử dụng nó như 1 gem với Ruby on Rails https://github.com/argerim/select2-rails
Để khởi tạo một select2 cho riêng bạn :

<script type="text/javascript">
  $('select').select2();
</script>

Một số tính năng hay dùng với Select2

Cơ bản

$(document).ready(function() {
  $(".js-example-basic-single").select2();
  // Thêm các tùy chọn của bạn vào đây.
});

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Placeholders

$(".js-example-placeholder-single").select2({
  placeholder: "Select a state",
  allowClear: true
});

Hiển thị nút xóa các giá trị đã chọn

$(".js-example-clear").select2({
  allowClear: true
});

Đọc dữ liệu từ một mảng

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".js-example-data-array").select2({
  data: data
})

Đọc dữ liệu từ nguồn khác sử dụng AJAX

ajax: {
  url: "/contacts",
  dataType: "json",
  delay: 200,
  data: function (params) {
    return {
      search: params.term
    };
  },
  processResults: function (data) {
    return {
      results: data
    };
  },
  cache: true
}

Disabled mode

$(".js-example-disabled").prop("disabled", false);

Ẩn ô tìm kiếm

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Bắt các sự kiện

var $eventSelect = $(".js-example-events");

$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });

Chế độ thẻ Tagging

$(".js-example-tags").select2({
  tags: true
})

Automatic tokenization

$(".js-example-tokenizer").select2({
  tags: true,
  tokenSeparators: [',', ' ']
})

Hỗ trợ đã ngôn ngữ

$(".js-example-language").select2({
  language: "es"
});

Căn lề về bên phải

$(".js-example-rtl").select2({
  dir: "rtl"
});

Còn rất nhiều khả năng mà Select2 có thể làm, bạn có thể tham khảo thêm tại https://select2.github.io/

Nguồn

https://select2.github.io/