Bootstrap 5 thả xuống nhiều lựa chọn với tìm kiếm
Kích thước tập tin. 1. 27 MBViews Total. 136798Cập nhật lần cuối. 19/12/2021 04. 14. 00 UTC Ngày Xuất bản. 15/05/2018 01. 39. 36 UTCTrang web chính thức. Tới trang webGiấy phép. MIT Show Tải xuống bản trình diễn Thêm trong danh mục này Xem các plugin được đề xuất TOP 100 Plugin jQuery 2022 Chrome, IE9+, FireFox, Opera, Safari#Bootstrap 5#Bootstrap#bootstrap 4#Nhập nhiều thẻ#Chọn Chỉ là một plugin đa lựa chọn khác cho khung Bootstrap 5 (và 4) giúp chuyển đổi danh sách nhiều lựa chọn thành danh sách thả xuống dễ sử dụng với các hộp kiểm Người dùng của bạn có thể chọn một hoặc nhiều tùy chọn từ danh sách thả xuống bằng cách nhấp vào hộp kiểm Để xóa lựa chọn, chỉ cần nhấp vào biểu tượng 1 bên trong các tùy chọn đã chọn giống như nhập thẻ Nhiều tính năng hơn
Làm thế nào để sử dụng nó1. Để sử dụng plugin, đảm bảo bạn đã cài đặt thư viện jQuery và khung Bootstrap 5 (hoặc Bootstrap 4) 2. Tải tập lệnh của plugin jQuery BsMultiSelect sau jQuery 3. Chỉ cần gọi hàm 2 trong danh sách đa lựa chọn và plugin sẽ thực hiện phần còn lại $(function(){ $("select").bsMultiSelect(); }); 4. Bạn cũng có thể xác định các tùy chọn trong JavaScript như sau
$('.container').bsMultiSelect({ options : [ {text:"Asia", value:"C0",hidden:false,disabled:false,selected:true}, {text:"Europe",value:"C1",hidden:false,disabled:false,selected:false}, {text:"Australia",value:"C2",hidden:false,disabled:false,selected:false} ], getDisabled : () => {}, getIsValid : () => {}, getIsInvalid : () => {} }); 5. Tất cả các tùy chọn mặc định để tùy chỉnh plugin ________số 8_______6. Ghi đè các kiểu mặc định & các lớp Bootstrap 4 để tùy chỉnh plugin $("select").bsMultiSelect({ cssPatch: { choices: { listStyleType: 'none' }, picks: { listStyleType: 'none', display: 'flex', flexWrap: 'wrap', height: 'auto', marginBottom: '0' }, choice: 'px-md-2 px-1', choice_hover: 'text-primary bg-light', filterInput: { border: '0px', height: 'auto', boxShadow: 'none', padding: '0', margin: '0', outline: 'none', backgroundColor: 'transparent', backgroundImage: 'none' // otherwise BS .was-validated set its image }, filterInput_empty: 'form-control', // need for placeholder, TODO test form-control-plaintext // used in staticContentGenerator picks_disabled: { backgroundColor: '#e9ecef' }, picks_focus: { borderColor: '#80bdff', boxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)' }, picks_focus_valid: { borderColor: '', boxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)' }, picks_focus_invalid: { borderColor: '', boxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)' }, // used in BsAppearance picks_def: { minHeight: 'calc(2.25rem + 2px)' }, picks_lg: { minHeight: 'calc(2.875rem + 2px)' }, picks_sm: { minHeight: 'calc(1.8125rem + 2px)' }, // used in pickContentGenerator pick: { paddingLeft: '0px', lineHeight: '1.5em' }, pickButton: { fontSize: '1.5em', lineHeight: '.9em', float: "none" }, pickContent_disabled: { opacity: '.65' }, // used in choiceContentGenerator choiceContent: { justifyContent: 'initial' }, // BS problem: without this on inline form menu items justified center choiceLabel: { color: 'inherit' }, // otherwise BS .was-validated set its color choiceCheckBox: { color: 'inherit' }, choiceLabel_disabled: { opacity: '.65' } } }); 7. Bạn có thể tạo kiểu cho plugin bằng CSS của riêng mình mà không cần Bootstrap 4 $("select").bsMultiSelect({ useCssPatch: false, css: { choices: 'dropdown-menu', // bs4, in bsmultiselect.scss as ul.dropdown-menu choice_hover: 'hover', // not bs4, in scss as 'ul.dropdown-menu li.hover' choice_selected: '', choice_disabled: '', picks: 'form-control', // bs4, in scss 'ul.form-control' picks_focus: 'focus', // not bs4, in scss 'ul.form-control.focus' picks_disabled: 'disabled', // not bs4, in scss 'ul.form-control.disabled' pick_disabled: '', pickFilter: '', filterInput: '', // used in BsPickContentStylingCorrector pick: 'badge', // bs4 pickContent: '', pickContent_disabled: 'disabled', // not bs4, in scss 'ul.form-control li span.disabled' pickButton: 'close', // bs4 // used in BsChoiceContentStylingCorrector // choice: 'dropdown-item', // it seems like hover should be managed manually since there should be keyboard support choiceCheckBox_disabled: 'disabled', // not bs4, in scss as 'ul.form-control li .custom-control-input.disabled ~ .custom-control-label' choiceContent: 'custom-control custom-checkbox d-flex', // bs4 d-flex required for rtl to align items choiceCheckBox: 'custom-control-input', // bs4 choiceLabel: 'custom-control-label justify-content-start', choiceLabel_disabled: '' } }); 8. Triển khai nó dưới dạng mô-đun ES import Popper from "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.js" import {BsMultiSelect} from "./dist/js/BsMultiSelect.esm.min.js" var mySelect = document.querySelector('#select-id'); var environment = {window, Popper}; bsMultiSelect = BsMultiSelect(mySelect, environment, { // settings here }); 9. Cập nhật các thay đổi trên thành phần bằng các phương thức API sau 0 Nhật ký thay đổiv2. 0. 0beta28 (2021-12-19)
v2. 0. 0beta27 (2021-12-08)
v2. 0. 0beta26 (2021-12-05)
v2. 0. 0beta25 (2021-12-01)
v1. 1. 18 (2021-09-06)
v1. 1. 17 (2021-09-02)
v1. 1. 16 (2021-08-25)
v1. 1. 15 (2021-07-04)
v1. 1. 14 (2021-07-04)
v1. 1. 13 (2021-06-29)
v1. 1. 13 (2021-06-28)
v1. 1. 12 (2021-06-26)
v1. 1. 11 (2021-06-25)
v1. 1. 8 (2021-06-24)
v1. 1. 7 (2021-06-20)
v1. 1. 6 (2021-06-17)
v1. 1. 1 (2021-06-08)
v1. 1. 0 (2021-06-08)
v1. 0. 4 (2021-06-05)
v1. 0. 3 (2021-06-04)
v1. 0. 1/2 (2021-06-03)
v1. 0. 0 (2021-05-27)
v0. 6. 27 (2020-08-19)
v0. 6. 27 (2020-08-05)
v0. 6. 25 (2020-07-02)
v0. 6. 23 (2020-06-27)
v0. 6. 22 (2020-06-26)
v0. 6. 21 (2020-06-25)
v0. 6. 20 (2020-06-24)
v0. 6. 19 (2020-06-23)
v0. 6. 18 (2020-06-22)
v0. 6. 15 (2020-06-20)
v0. 6. 14 (2020-06-19)
v0. 6. 13 (2020-06-18)
v0. 6. 12 (2020-06-17)
v0. 6. 11 (2020-06-16)
v0. 6. 10 (2020-06-15)
v0. 6. 9 (2020-06-13)
v0. 6. 8 (2020-06-13)
v0. 6. 7 (2020-06-11)
v0. 6. 5 (2020-06-11)
v0. 6. 4 (2020-06-10)
v0. 6. 3 (2020-06-09)
v0. 6. 2 (2020-06-08)
v0. 6. 0 (2020-06-02)
v0. 5. 68 (2020-06-01)
v0. 5. 67 (2020-05-31)
v0. 5. 66 (2020-05-30)
v0. 5. 65 (2020-05-29)
v0. 5. 64 (2020-05-29)
v0. 5. 63 (2020-05-21)
v0. 5. 62 (2020-05-20)
v0. 5. 61 (2020-05-19)
v0. 5. 60 (2020-05-18)
v0. 5. 59 (2020-05-17)
v0. 5. 58 (2020-05-05)
v0. 5. 57 (2020-05-05)
v0. 5. 56 (2020-05-04)
v0. 5. 55 (2020-05-01)
v0. 5. 53 (2020-04-30)
v0. 5. 52 (2020-04-29)
v0. 5. 51 (2020-04-28)
v0. 5. 50 (2020-04-26)
v0. 5. 49 (2020-04-25)
v0. 5. 48 (2020-04-24)
v0. 5. 47 (2020-04-22)
v0. 5. 46 (2020-04-21)
v0. 5. 45 (2020-04-19)
v0. 5. 44 (2020-04-18)
v0. 5. 43 (2020-04-17)
v0. 5. 42 (2020-04-16)
v0. 5. 41 (2020-04-15)
v0. 5. 40 (2020-03-18)
v0. 5. 39 (2020-03-17)
v0. 5. 38 (2020-03-16)
v0. 5. 37 (2020-03-15)
v0. 5. 36 (2020-03-12)
v0. 5. 35 (2020-03-11)
v0. 5. 34 (2020-03-10)
v0. 5. 33 (2020-03-09)
v0. 5. 32 (2020-03-08)
v0. 5. 31 (2020-03-07)
v0. 5. 30 (2020-03-06)
v0. 5. 29 (2020-03-05)
v0. 5. 28 (2020-03-04)
v0. 5. 27 (2020-03-03)
v0. 5. 26 (2020-03-02)
v0. 5. 25 (2020-03-01)
v0. 5. 24 (2020-02-29)
v0. 5. 23 (2020-02-28)
v0. 5. 22 (2020-02-27)
v0. 5. 21 (2020-02-26)
v0. 5. 20 (2020-02-25)
v0. 5. 19 (2020-02-24)
v0. 5. 18 (2020-02-24)
v0. 5. 16 (2020-02-22)
v0. 5. 15 (2020-02-21)
v0. 5. 14 (2020-02-20)
v0. 5. 13 (2020-02-19)
v0. 5. 12 (2020-02-18)
v0. 5. 11 (2020-02-17)
v0. 5. 10 (2020-02-12)
v0. 5. 9 (2020-02-12)
v0. 5. 8 (2020-02-10)
v0. 5. 7/6 (2020-02-09)
v0. 5. 5 (2020-02-08)
v0. 5. 4 (2020-02-06)
v0. 5. 3 (2020-02-06)
v0. 5. 2 (2020-02-05)
v0. 5. 0 (2020-02-04)
v0. 4. 34thử nghiệm (2020-01-24)
v0. 4. 33 (21-12-2019)
v0. 4. 32 (20-12-2019)
v0. 4. 31 (20-12-2019)
v0. 4. 30 (2019-12-19)
v0. 4. 29 (2019-12-17)
v0. 4. 27 (2019-12-17)
v0. 4. 26 (2019-12-16)
v0. 4. 20 (2019-12-14)
v0. 4. 19 (2019-12-14)
v0. 4. 18 (2019-12-13)
v0. 4. 17 (12-11-2019)
v0. 4. 11/10/12 (2019-12-08)
v0. 4. 11/10/12 (2019-12-07)
v0. 4. 9 (2019-12-06)
v0. 4. 6 (2019-12-03)
v0. 4. 5 (28-11-2019)
v0. 4. 4 (27-11-2019)
v0. 4. 3 (26-11-2019)
v0. 4. 2 (2019-11-13)
v0. 4. 1 (2019-11-01)
v0. 4. 0 (25-10-2019)
v0. 3. 0 (21-10-2019)
v0. 2. 24 (2019-07-28)
v0. 2. 23 (2019-07-27)
v0. 2. 22 (2019-04-12)
2018-10-11
2018-07-25
2018-06-25
2018-06-23
2018-06-22
2018-06-20
2018-06-13
2018-06-11
2018-06-06
2018-06-05
2018-06-02
2018-05-31
2018-05-24
2018-05-23
2018-05-21
Plugin jQuery tuyệt vời này được phát triển bởi DashboardCode. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức Làm cách nào để tạo nhiều lựa chọn thả xuống trong Bootstrap 5?. Menu thả xuống nhiều lựa chọn với danh mục là gì?Danh sách thả xuống nhiều lựa chọn được sử dụng khi người dùng muốn lưu trữ nhiều giá trị cho cùng một bản ghi, trong khi danh sách thả xuống được sử dụng để lưu trữ một giá trị cho một bản ghi. Bạn có thể tạo danh mục tùy chỉnh của danh sách thả xuống hoặc danh sách thả xuống nhiều lựa chọn và xác định các mục trong mỗi danh mục .
Làm cách nào để sử dụng bootstrap multiselect js?Cách sử dụng cơ bản. . Bao gồm thư viện javascript jQuery và khung Bootstrap của Twitter trên trang của bạn. . Bao gồm plugin multiselect jQuery bootstrap trên trang, sau thư viện jQuery. . Tạo một danh sách lựa chọn tiêu chuẩn. . Gọi hàm trên phần tử chọn để khởi tạo plugin |