> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/su-dung-select2-de-thay-the-select-boxes.md). # \[SELECT2] Sử dụng Select2 để thay thế select boxes 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ẻ \ trên trang HTML của bạn.
```
``` Hoặc có thể sử dụng qua CDN ``` ``` 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 : ``` ``` #### 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. }); ``` #### 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 #### Nguồn --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://javascriptuse.gitbook.io/javascript/su-dung-select2-de-thay-the-select-boxes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.