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

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

Bootstrap 5 thả xuống nhiều lựa chọn với tìm kiếm

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

  • hỗ trợ RTL
  • Cho phép triển khai dưới dạng mô-đun ES (không yêu cầu jQuery)
  • Xác thực biểu mẫu
  • Bộ lọc trực tiếp
  • Được cấp phép theo Apache 2

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 đổi

v2. 0. 0beta28 (2021-12-19)

  • Cập nhật

v2. 0. 0beta27 (2021-12-08)

  • Cập nhật

v2. 0. 0beta26 (2021-12-05)

  • Cập nhật gói NPM

v2. 0. 0beta25 (2021-12-01)

  • Cập nhật gói NPM
  • Phiên bản Bootstrap 4 được cập nhật

v1. 1. 18 (2021-09-06)

  • Vá lỗi

v1. 1. 17 (2021-09-02)

  • Vá lỗi

v1. 1. 16 (2021-08-25)

  • cập nhật CSS

v1. 1. 15 (2021-07-04)

  • tối ưu hóa

v1. 1. 14 (2021-07-04)

  • scrollIntoView được cải thiện

v1. 1. 13 (2021-06-29)

  • scrollIntoView for ChoicesDynamicStylingPlugin

v1. 1. 13 (2021-06-28)

  • scrollIntoView for ChoicesDynamicStylingPlugin

v1. 1. 12 (2021-06-26)

  • Sửa lỗi

v1. 1. 11 (2021-06-25)

  • Sửa lỗi

v1. 1. 8 (2021-06-24)

  • HighlightPlugin, CustomChoiceStylingPlugin, CustomPickStylingPlugin

v1. 1. 7 (2021-06-20)

  • ChoicesDynamicStylingPlugin

v1. 1. 6 (2021-06-17)

  • Vá lỗi
  • Cải thiện thông báo 'không có kết quả'

v1. 1. 1 (2021-06-08)

  • Vấn đề giữ chỗ đặt IE11 đã được giải quyết

v1. 1. 0 (2021-06-08)

  • phá vỡ sự thay đổi trong thế hệ DOM

v1. 0. 4 (2021-06-05)

  • phá vỡ sự thay đổi trong thế hệ DOM. trình đơn thả xuống trước đó ul được bao bọc thành div

v1. 0. 3 (2021-06-04)

  • vấn đề với phần đệm giữa các lần chọn trong rtl đã được giải quyết

v1. 0. 1/2 (2021-06-03)

  • Gói UMD không hỗ trợ jquery
  • Nhãn nổi (phiên bản Bootstrap 5)

v1. 0. 0 (2021-05-27)

  • Hỗ trợ Bootstrap 5

v0. 6. 27 (2020-08-19)

  • cập nhật

v0. 6. 27 (2020-08-05)

  • khôi phục khả năng tương thích với mã cũ

v0. 6. 25 (2020-07-02)

  • tối ưu hóa

v0. 6. 23 (2020-06-27)

  • tối ưu hóa

v0. 6. 22 (2020-06-26)

  • Đã sửa chữa lỗi không mong muốn

v0. 6. 21 (2020-06-25)

  • Đã sửa chữa lỗi không mong muốn

v0. 6. 20 (2020-06-24)

  • Tối ưu hóa

v0. 6. 19 (2020-06-23)

  • Tối ưu hóa

v0. 6. 18 (2020-06-22)

  • Vá lỗi

v0. 6. 15 (2020-06-20)

  • Tối ưu hóa bố cục api

v0. 6. 14 (2020-06-19)

  • Thiết kế lại FilterAspect

v0. 6. 13 (2020-06-18)

  • thiết kế lại bố cục

v0. 6. 12 (2020-06-17)

  • thay đổi API

v0. 6. 11 (2020-06-16)

  • Vá lỗi

v0. 6. 10 (2020-06-15)

  • Vá lỗi

v0. 6. 9 (2020-06-13)

  • tối ưu hóa

v0. 6. 8 (2020-06-13)

  • API được tối ưu hóa

v0. 6. 7 (2020-06-11)

  • Vá lỗi

v0. 6. 5 (2020-06-11)

  • tối ưu hóa

v0. 6. 4 (2020-06-10)

  • tối ưu hóa

v0. 6. 3 (2020-06-09)

  • Đã sửa lỗi Tham chiếu. điều chỉnhLegacySettings không được xác định

v0. 6. 2 (2020-06-08)

  • API cập nhật

v0. 6. 0 (2020-06-02)

  • tên API đã thay đổi

v0. 5. 68 (2020-06-01)

  • tối ưu hóa

v0. 5. 67 (2020-05-31)

  • tối ưu hóa

v0. 5. 66 (2020-05-30)

  • tối ưu hóa

v0. 5. 65 (2020-05-29)

  • Đã sửa lỗi bắt đầu flex IE11

v0. 5. 64 (2020-05-29)

  • tối ưu hóa

v0. 5. 63 (2020-05-21)

  • tối ưu hóa

v0. 5. 62 (2020-05-20)

  • tối ưu hóa

v0. 5. 61 (2020-05-19)

  • Đã sửa chữa lỗi không mong muốn

v0. 5. 60 (2020-05-18)

  • Đã sửa chữa lỗi không mong muốn

v0. 5. 59 (2020-05-17)

  • Đã sửa chữa lỗi không mong muốn

v0. 5. 58 (2020-05-05)

  • FormRestoreOnBackwardPlugin

v0. 5. 57 (2020-05-05)

  • tối ưu hóa

v0. 5. 56 (2020-05-04)

  • đã thêm plugin Trình giữ chỗ

v0. 5. 55 (2020-05-01)

  • tối ưu hóa

v0. 5. 53 (2020-04-30)

  • tối ưu hóa

v0. 5. 52 (2020-04-29)

  • tối ưu hóa

v0. 5. 51 (2020-04-28)

  • tối ưu hóa

v0. 5. 50 (2020-04-26)

  • plugin api có sẵn cho mô-đun BsMultiSelect esm

v0. 5. 49 (2020-04-25)

  • Đã thêm tùy chọn ngăn chặn tràn vào cửa sổ bật lên

v0. 5. 48 (2020-04-24)

  • API đã thay đổi

v0. 5. 47 (2020-04-22)

  • Vá lỗi

v0. 5. 46 (2020-04-21)

  • API đã thay đổi

v0. 5. 45 (2020-04-19)

  • Sự cải tiến

v0. 5. 44 (2020-04-18)

  • alignToFilterInputItemLocation được tối ưu hóa

v0. 5. 43 (2020-04-17)

  • Đã sửa lỗi khởi động flex trên IE11

v0. 5. 42 (2020-04-16)

  • tối ưu hóa

v0. 5. 41 (2020-04-15)

  • API đã thay đổi - UpdateOptionHidden
  • Đã sửa chữa lỗi không mong muốn

v0. 5. 40 (2020-03-18)

  • Tối ưu hóa

v0. 5. 39 (2020-03-17)

  • Trải nghiệm người dùng tốt hơn

v0. 5. 38 (2020-03-16)

  • Đã sửa chữa lỗi không mong muốn

v0. 5. 37 (2020-03-15)

  • phương pháp được cập nhật

v0. 5. 36 (2020-03-12)

  • Đã thêm phương thức UpdateOptionInserted

v0. 5. 35 (2020-03-11)

  • tối ưu hóa

v0. 5. 34 (2020-03-10)

  • tối ưu hóa

v0. 5. 33 (2020-03-09)

  • tối ưu hóa

v0. 5. 32 (2020-03-08)

  • Đã thêm phương thức mới UpdateOptionsDisabled
  • Đã đổi tên UpdateSelected thành UpdateOptionsSelected

v0. 5. 31 (2020-03-07)

  • Đã sửa chữa lỗi không mong muốn

v0. 5. 30 (2020-03-06)

  • Đã sửa lỗi rò rỉ bộ nhớ

v0. 5. 29 (2020-03-05)

  • Nhấn Enter trong đầu vào sẽ mở danh sách thả xuống

v0. 5. 28 (2020-03-04)

  • Tối ưu hóa cho bộ lọc

v0. 5. 27 (2020-03-03)

  • Đã sửa lỗi toàn bộ trận đấu

v0. 5. 26 (2020-03-02)

  • tối ưu hóa

v0. 5. 25 (2020-03-01)

  • tối ưu hóa

v0. 5. 24 (2020-02-29)

  • đã thêm API UpdateSelected

v0. 5. 23 (2020-02-28)

  • cấu hình được tối ưu hóa

v0. 5. 22 (2020-02-27)

  • tối ưu hóa

v0. 5. 21 (2020-02-26)

  • cập nhật kiểu dáng

v0. 5. 20 (2020-02-25)

  • Vá lỗi

v0. 5. 19 (2020-02-24)

  • tối ưu hóa

v0. 5. 18 (2020-02-24)

  • đã cập nhật API

v0. 5. 16 (2020-02-22)

  • Tối ưu hóa

v0. 5. 15 (2020-02-21)

  • setSelected sẽ không xóa thuộc tính đã chọn

v0. 5. 14 (2020-02-20)

  • phương thức mới UpdateAppearance

v0. 5. 13 (2020-02-19)

  • Nguyên mẫu BsMultiSelect jQuery có thể tạo phiên bản (chỉ được trả lại)

v0. 5. 12 (2020-02-18)

  • Vá lỗi

v0. 5. 11 (2020-02-17)

  • Đã thêm phương thức GetChoices() trả về menu 'thả xuống'

v0. 5. 10 (2020-02-12)

  • mô-đun ES6

v0. 5. 9 (2020-02-12)

  • tối ưu hóa

v0. 5. 8 (2020-02-10)

  • tối ưu hóa

v0. 5. 7/6 (2020-02-09)

  • tối ưu hóa

v0. 5. 5 (2020-02-08)

  • Đã sửa lỗi kiểu thả xuống

v0. 5. 4 (2020-02-06)

  • định cấu hình css/cssPatch, giả sử giá trị null/không xác định cho thuộc tính kiểu - thuộc tính sẽ bị xóa khỏi từ điển kiểu mặc định

v0. 5. 3 (2020-02-06)

  • biện minh trong menu thả xuống cho biểu mẫu nội tuyến đã được giải quyết

v0. 5. 2 (2020-02-05)

  • Lỗi cố định

v0. 5. 0 (2020-02-04)

  • cập nhật

v0. 4. 34thử nghiệm (2020-01-24)

  • tùy chọn chuẩn hóa
  • rò rỉ mem đã được giải quyết
  • hỗ trợ RTL

v0. 4. 33 (21-12-2019)

  • hỗ trợ tốt hơn cho đầu vào nhóm

v0. 4. 32 (20-12-2019)

  • getSize, getDisabled, getIsValid, getIsInValid (thực tế cho đối tượng js được khởi tạo) có sẵn để thiết lập từ cấu hình

v0. 4. 31 (20-12-2019)

  • Đệm tốt hơn cho kích thước sm lg

v0. 4. 30 (2019-12-19)

  • cấu hình. setSelected làm hook cho các sự kiện lựa chọn trước và sau

v0. 4. 29 (2019-12-17)

  • hỗ trợ hình thức-kiểm soát-lg/sm
  • hỗ trợ input-group-lg và input-group-sm (trên vùng chứa)

v0. 4. 27 (2019-12-17)

  • giao diện đẹp hơn trên các thiết bị điện thoại

v0. 4. 26 (2019-12-16)

  • vấn đề giữ chỗ cố định

v0. 4. 20 (2019-12-14)

  • trình giữ chỗ trên IE11 trông đẹp hơn

v0. 4. 19 (2019-12-14)

  • Đã thêm hỗ trợ trình giữ chỗ

v0. 4. 18 (2019-12-13)

  • khởi tạo phần tử dom "no flick" trong html;

v0. 4. 17 (12-11-2019)

  • Hỗ trợ bộ trường

v0. 4. 11/10/12 (2019-12-08)

  • hỗ trợ thiết lập lại biểu mẫu
  • đã loại bỏ đầu ra giao diện điều khiển
  • bây giờ "GetContainer" trả về container div
  • sửa lỗi

v0. 4. 11/10/12 (2019-12-07)

  • bỏ chọn lỗi đã chọn đã được giải quyết
  • trước tiên hãy đóng menu thả xuống sau đó chuyển sang chế độ

v0. 4. 9 (2019-12-06)

  • tối ưu hóa nhỏ và sửa lỗi

v0. 4. 6 (2019-12-03)

  • Vá lỗi

v0. 4. 5 (28-11-2019)

  • Phím xuống ESC hiện được xử lý với preventDefault (để không sao chép chức năng tùy chỉnh văn bản rõ ràng)

v0. 4. 4 (27-11-2019)

  • nhấp vào bên trong bảng đã chọn không xóa đầu vào bộ lọc (chúng tôi có bootrap x cho nút này và nút ESC)

v0. 4. 3 (26-11-2019)

  • đã sửa. "hai mục thả xuống có thể được di chuột trong giây lát" (một bằng chuột thứ hai từ bàn phím)

v0. 4. 2 (2019-11-13)

  • API cấu hình đã thay đổi;

v0. 4. 1 (2019-11-01)

  • đã thêm phương thức "buildConfiguration"

v0. 4. 0 (25-10-2019)

  • đã thêm phương thức "buildConfiguration"
  • tạo id cho đầu vào nhãn được thiết kế lại một lần nữa (bây giờ id được sử dụng trước, nếu không có id thì tên được sử dụng)
  • hộp kiểm không có id kể từ bây giờ (các sự kiện js được sử dụng để tham chiếu nhãn và hộp kiểm, không phải chức năng "for-id")

v0. 3. 0 (21-10-2019)

  • đối tượng cấu hình hiện được đặt tên là "cấu hình" (là tùy chọn)
  • tạo id - id mới (btw, việc tạo id có thể được tùy chỉnh chỉ định cấu hình. createCheckBoxId và cấu hình. phương thức createInputId)

v0. 2. 24 (2019-07-28)

  • thêm (mã hóa cứng) css float. không có nút "hủy" nhịp (x) vì nhóm BS đã thêm float. ngay với nó (tại sao?) trong một trong những phiên bản BS mới nhất;

v0. 2. 23 (2019-07-27)

  • hỗ trợ bsMultiSelect khi thả xuống. nhấp để xóa/bỏ chọn mục không được xử lý trong setTimeout(. ,0) điều này giúp lọc ra các lần nhấp gần trong trình xử lý sự kiện ẩn của trình đơn thả xuống (điều tra xem mục tiêu lần nhấp là bsMultiSelect và bỏ qua nó)

v0. 2. 22 (2019-04-12)

  • UX tốt hơn, khi chỉ còn lại một trong danh sách gợi ý aoto - tab và nhập chọn nó

2018-10-11

  • chiều cao ban đầu -> tự động vì IE11 không hỗ trợ ban đầu (và cập nhật nút)

2018-07-25

  • hỗ trợ BS4. 1. 3 điều khiển biểu mẫu chiều cao cố định

2018-06-25

  • sửa lỗi "có thể chọn tắt"

2018-06-23

  • v0. 2. 9. Vá lỗi

2018-06-22

  • v0. 2. 7

2018-06-20

  • Vá lỗi

2018-06-13

  • đổi tên chỉ đọc thành vô hiệu hóa

2018-06-11

  • loại bỏ nhãn lần nhấp trả lại giá trị cuối cùng

2018-06-06

  • sửa lỗi tự động đóng sau khi chọn
  • sửa lỗi tùy chọn

2018-06-05

  • kích hoạt thay đổi trên lựa chọn ban đầu

2018-06-02

  • hỗ trợ vô hiệu hóa năng động

2018-05-31

  • thông quaFilterInputLength trong clearFilterInput

2018-05-24

  • thông quaFilterInputLength trong clearFilterInput

2018-05-23

  • v0. 1. 3. mã được điều chỉnh bởi eslint;

2018-05-21

  • v0. 1. 0

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?

.
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