Tạo tài khoản

Select2 là gì? Sử dụng Select2 cơ bản

truongtuongtu bắt đầu chủ đề từ 4 năm trước

@truongtuongtu ·

Select2 là gì?

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>

Sử dụng Select2 cơ bản

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"
});

Kết luận:

Select2 đa di năng phết phải không nào. 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/

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·