Chọn nhiều Bootstrap 4

Kích thước tập tin. 1. 68 MBLượt xem Tổng cộng. 659942Cập nhật lần cuối. 08/07/2021 01. 35. 00 UTC Ngày Xuất bản. 27/11/2013 12. 52. 39 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, IE8+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Checkbox#Multiple Select

Bootstrap Multiselect là một plugin jQuery dành cho Bootstrap 4 & 3 cho phép khách truy cập chọn nhiều tùy chọn từ danh sách chọn thả xuống có chứa các tùy chọn đơn lẻ dưới dạng hộp kiểm

Được cấp phép theo Giấy phép Apache, Phiên bản 2. 0 & Điều khoản 3 BSD. Phiên bản Bootstrap 3 có sẵn tại đây

Nhiều tính năng hơn

• Cho phép nội dung HTML trong các tùy chọn
• Menu thả xuống bên phải hoặc trên cùng
• Chọn tùy chọn Tất cả để chọn tất cả các tùy chọn chỉ bằng một cú nhấp chuột
• Nhóm lựa chọn có thể thu gọn
• Cho phép lọc các tùy chọn
• mẫu tùy chỉnh
• Có thể truy cập bàn phím
• Xử lý phía máy chủ
• Và nhiều hơn nữa

plugin thay thế

• Plugin nhiều hộp chọn jQuery
• Plugin thay thế phần tử nhiều lựa chọn của jQuery - danh sách chọn
• Plugin jQuery để chọn nhiều thành phần - Nhiều lựa chọn

Xem thêm các plugin Multi Select tại

• 30 plugin jQuery nhiều lựa chọn tốt nhất

Sử dụng cơ bản

1. Bao gồm thư viện javascript jQuery và khung Bootstrap của Twitter trên trang của bạn

2. Bao gồm plugin multiselect jQuery bootstrap trên trang, sau thư viện jQuery

3. Tạo một danh sách lựa chọn tiêu chuẩn

  Javascript
  Python
  LISP
  C++
  jQuery
  Ruby

4. Gọi hàm trên phần tử chọn để khởi tạo plugin

$(function(){
  $('#demo').multiselect();
});

5. Tất cả các tùy chọn plugin mặc định để tùy chỉnh nhiều lựa chọn

$('#demo').multiselect({

  // allows HTML content
  enableHTML: false,

  // CSS class of the multiselect button
  buttonClass: 'custom-select',

  // inherits the class of the button from the original select
  inheritClass: false,

  // width of the multiselect button
  buttonWidth: 'auto',

  // container that holds both the button as well as the dropdown
  buttonContainer: '
',

  // places the dropdown on the right side
  dropRight: false,

  // places the dropdown on the top
  dropUp: false,

  // CSS class of the selected option
  selectedClass: 'active',

  // maximum height of the dropdown menu
  // if maximum height is exceeded a scrollbar will be displayed
  maxHeight: false,

  // includes Select All Option
  includeSelectAllOption: false,

  // shows the Select All Option if options are more than ...
  includeSelectAllIfMoreThan: 0,

  // Lable of Select All
  selectAllText: ' Select all',

  // the select all option is added as additional option within the select
  // o distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option.
  selectAllValue: 'multiselect-all',

  // control the name given to the select all option
  selectAllName: false,

  // if true, the number of selected options will be shown in parantheses when all options are seleted. 
  selectAllNumber: true,

  // setting both includeSelectAllOption and enableFiltering to true, the select all option does always select only the visible option
  // with setting selectAllJustVisible to false this behavior is changed such that always all options (irrespective of whether they are visible) are selected
  selectAllJustVisible: true,

  // enables filtering
  enableFiltering: false,

  // determines if is case sensitive when filtering
  enableCaseInsensitiveFiltering: false,

  // enables full value filtering
  enableFullValueFiltering: false,

  // if true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group
  enableClickableOptGroups: false,

  // enables collapsible OptGroups
  enableCollapsibleOptGroups: false,

  // collapses all OptGroups on init
  collapseOptGroupsByDefault: false,

  // placeholder of filter filed
  filterPlaceholder: 'Search',

  // possible options: 'text', 'value', 'both'
  filterBehavior: 'text',

  // includes clear button inside the filter filed
  includeFilterClearBtn: true,

  // prevents input change event
  preventInputChangeEvent: false,

  // message to display when no option is selected
  nonSelectedText: 'None selected',

  // message to display if more than numberDisplayed options are selected
  nSelectedText: 'selected',

  // message to display if all options are selected
  allSelectedText: 'All selected',

  // determines if too many options would be displayed
  numberDisplayed: 3,

  // disables the multiselect if empty
  disableIfEmpty: false,

  // message to display if the multiselect is disabled
  disabledText: '',

  // the separator for the list of selected items for mouse-over
  delimiterText: ', ',

  // includes Reset Option
  includeResetOption: false,

  // includes Rest Divider
  includeResetDivider: false,

  // lable of Reset  Option
  resetText: 'Reset',

  // indent group options
  indentGroupOptions: true,

  // possible options: 'never', 'always', 'ifPopupIsSmaller', 'ifPopupIsWider'
  widthSynchronizationMode: 'never',

  // text alignment
  buttonTextAlignment: 'center',

  // custom templates
  templates: {
    button: '',
    popupContainer: '
',
    filter: '
',
    filterClearBtn: '
',
    option: '',
    divider: '
',
    optionGroup: '',
    resetButton: '
'
  }
  
});

6. chức năng gọi lại

/**
 * Default text function will either print 'None selected' in case no
 * option is selected or a list of the selected options up to a length
 * of 3 selected options.
 *
 * @param {jQuery} options
 * @param {jQuery} select
 * @returns {String}
 */
buttonText: function (options, select) {
    if (this.disabledText.length > 0
        && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {

        return this.disabledText;
    }
    else if (options.length === 0) {
        return this.nonSelectedText;
    }
    else if (this.allSelectedText
        && options.length === $('option', $(select)).length
        && $('option', $(select)).length !== 1
        && this.multiple) {

        if (this.selectAllNumber) {
            return this.allSelectedText + ' (' + options.length + ')';
        }
        else {
            return this.allSelectedText;
        }
    }
    else if (this.numberDisplayed != 0 && options.length > this.numberDisplayed) {
        return options.length + ' ' + this.nSelectedText;
    }
    else {
        var selected = '';
        var delimiter = this.delimiterText;

        options.each(function () {
            var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
            selected += label + delimiter;
        });

        return selected.substr(0, selected.length - this.delimiterText.length);
    }
},
/**
 * Updates the title of the button similar to the buttonText function.
 *
 * @param {jQuery} options
 * @param {jQuery} select
 * @returns {@exp;[email protected];substr}
 */
buttonTitle: function (options, select) {
    if (options.length === 0) {
        return this.nonSelectedText;
    }
    else {
        var selected = '';
        var delimiter = this.delimiterText;

        options.each(function () {
            var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
            selected += label + delimiter;
        });
        return selected.substr(0, selected.length - this.delimiterText.length);
    }
},
checkboxName: function (option) {
    return false; // no checkbox name
},
/**
 * Create a label.
 *
 * @param {jQuery} element
 * @returns {String}
 */
optionLabel: function (element) {
    return $(element).attr('label') || $(element).text();
},
/**
 * Create a class.
 *
 * @param {jQuery} element
 * @returns {String}
 */
optionClass: function (element) {
    return $(element).attr('class') || '';
},
/**
 * Triggered on change of the multiselect.
 *
 * Not triggered when selecting/deselecting options manually.
 *
 * @param {jQuery} option
 * @param {Boolean} checked
 */
onChange: function (option, checked) {

},
/**
 * Triggered when the dropdown is shown.
 *
 * @param {jQuery} event
 */
onDropdownShow: function (event) {

},
/**
 * Triggered when the dropdown is hidden.
 *
 * @param {jQuery} event
 */
onDropdownHide: function (event) {

},
/**
 * Triggered after the dropdown is shown.
 *
 * @param {jQuery} event
 */
onDropdownShown: function (event) {

},
/**
 * Triggered after the dropdown is hidden.
 *
 * @param {jQuery} event
 */
onDropdownHidden: function (event) {

},
/**
 * Triggered on select all.
 */
onSelectAll: function () {

},
/**
 * Triggered on deselect all.
 */
onDeselectAll: function () {

},
/**
 * Triggered after initializing.
 *
 * @param {jQuery} $select
 * @param {jQuery} $container
 */
onInitialized: function ($select, $container) {

},
/**
 * Triggered on filtering.
 *
 * @param {jQuery} $filter
 */
onFiltering: function ($filter) {

},

7. phương pháp API

// destroy the instance
$('#demo').multiselect('destroy');

// refresh the checked checkboxes based on the currently selected options
$('#demo').multiselect('refresh');

// rebuild the instance
$('#demo').multiselect('rebuild');

// select an option
$('#demo').multiselect('select', value);

// deselect an option
$('#demo').multiselect('deselect', value);

// select all options
$('#demo').multiselect('selectAll', justVisible);

// deselect all options
$('#demo').multiselect('deselectAll', justVisible);

// update the text and title of the button
$('#demo').multiselect('updateButtonText');

// update options
$('#demo').multiselect('setOptions', options);

// enable/disable the multiselect
$('#demo').multiselect('disable');
$('#demo').multiselect('enable');

/* provide options programmatically
  var data = [
      {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
      {label: 'Option 2', title: 'Option 2', value: '2'},
      {label: 'Option 3', title: 'Option 3', value: '3', selected: true}
  ];
*/
$('#demo').multiselect('dataprovider', data);

// programmatically provide a new text to display in the button when all options are selected, at runtime
$('#demo').multiselect('setAllSelectedText', value);

Nhật ký thay đổi

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

• Tùy chọn nút đặt lại
• onSelectAll và onDeselectAll nhận các tùy chọn đã thay đổi làm đối số
• Hỗ trợ bàn phím cố định
• Đã sửa lỗi thông số kỹ thuật của Bower và NPM, đặc biệt liên quan đến phiên bản Bootstrap và thông tin meta

v1. 1. 0 (2021-07-30)

• Thiết kế lại bộ lọc và các mục hoạt động
• Đã thêm tùy chọn mới "widthSynchronizationMode"
• Đã thêm tùy chọn mới "buttonTextAlignment"
• Đã sửa lỗi

2020-12-22

• Sửa chiều rộng chọn

v1. 0. 0 (2020-11-18)

• Đã cập nhật cho Bootstrap 4

2020-11-01

• v0. 9. 16

2018-03-04

• v0. 9. 15

2018-01-03

• vá lỗi

2017-12-18

• vá lỗi

2016-08-18

• v0. 9. 13

2016-07-30

• đã sửa. bỏ chọn/chọn không hoạt động với tìm kiếm khi giá trị được nhập vào tìm kiếm

2016-07-29

• Thêm trình giữ chỗ dữ liệu thu gọn nhiều lựa chọn

23-07-2016

• Đã sửa các sự cố khác với enableCollapsibleOptGroups

2016-04-23

• Cho phép tên hộp kiểm khác nhau cho cùng một danh sách thả xuống

21-04-2016

• đã sửa lỗi chọn tất cả + có thể nhấp + có thể thu gọn

2016-04-20

• vá lỗi

2016-04-18

• Một số bản sửa lỗi và nhiều thử nghiệm khác cho các nhóm tùy chọn có thể nhấp và có thể thu gọn

v0. 9. 13 (15-10-2015)

• vá lỗi

2015-05-27

• Đã thêm tùy chọn để thu gọn các nhóm (một số loại menu phụ)
• onChange được kích hoạt riêng cho từng tùy chọn (đã bỏ) được chọn

2015-04-12

• sửa lỗi

2015-03-18

• v0. 9. 12

2015-03-01

• cập nhật

2015-02-17

• cập nhật

2015-02-14

• Thêm tùy chọn onSelectAll

2015-02-13

• Hỗ trợ bộ lọc với các nhóm lựa chọn có thể nhấp

2014-11-02

• đã khắc phục sự cố

2014-10-13

• đã khắc phục sự cố

2014-08-08

• sửa lỗi cho IE 8

2014-08-03

• Cải thiện hiệu suất bộ lọc
• Thêm chức năng onDropdownShown gọi lại

2014-07-15

• Cập nhật

2014-05-24

• Cập nhật

2014-04-02

• Đã cập nhật bật, tắt demo

2014-04-01

• các mẫu có thể được ghi đè bằng các tùy chọn cấu hình

2014-03-31

• cập nhật

2014-03-13

• Bootstrap 3. 1. 1 bản cập nhật
• Đã sửa lỗi

2014-03-12

• Bootstrap 3. 1. 1 bản cập nhật
• Đã sửa lỗi

2014-02-07

• sửa lỗi

2014-01-09

• Đã sửa lỗi Khi tất cả các tùy chọn bắt đầu là đã chọn = 'đã chọn', hộp kiểm chọn tất cả không được chọn

2013-12-10

• Đã sửa lỗi khi không có ràng buộc tùy chọn nào được đưa ra

Plugin jQuery tuyệt vời này được phát triển bởi davidstutz. Để 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 để thêm nhiều danh sách thả xuống trong Bootstrap?

Đa lựa chọn bootstrap là gì?

Làm cách nào để tạo menu thả xuống nhiều lựa chọn trong Bootstrap 4?

Làm cách nào để sử dụng bootstrap multiselect js?