Sử dụng thư viện Select2

Select2 là công cụ khá tốt để tùy biến select box, 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


Link nguồn: https://github.com/select2/select2/tags

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

<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>

Khởi tạo JS

$(document).ready(function() {$(".select2-example").select2({ placeholder: "Select a state", allowClear: true }); });

Mã html

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

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