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

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?