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

https://viblo.asia/p/su-dung-select2-de-thay-the-select-boxes-3OEqGjlpR9bL

PreviousĐoạn code check lỗi PHP trong Ajax NextMột cách sử dụng lazyload khi addclass thật khó khăn...

Last updated 5 years ago

Was this helpful?

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

https://viblo.asia/p/su-dung-select2-de-thay-the-select-boxes-3OEqGjlpR9bL

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

Nguồn

PreviousĐoạn code check lỗi PHP trong Ajax NextMột cách sử dụng lazyload khi addclass thật khó khăn...

Last updated 5 years ago

Was this helpful?

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

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

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

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

Cơ bản

Placeholders

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

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

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

Disabled mode

Ẩn ô tìm kiếm

Bắt các sự kiện

Chế độ thẻ Tagging

Automatic tokenization

Hỗ trợ đã ngôn ngữ

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

Nguồn

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

Cơ bản

Placeholders

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

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

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

Disabled mode

Ẩn ô tìm kiếm

Bắt các sự kiện

Chế độ thẻ Tagging

Automatic tokenization

Hỗ trợ đã ngôn ngữ

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

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

Nguồn

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