Press "Enter" to skip to content

JQuery Multi-Select Plugin Based on Twitter Bootstrap

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using specific inputs with multiple themes. Instead of selecting, the boot button will be displayed in the dropdown menu containing the individual options as checkboxes.

More advantages:

  • HTML content is allowed in the options.
  • Right or top dropdown list.
  • Select All option to select all options with one click.
  • OptGroups are collapsible.
  • Filter options are allowed.
  • Custom templates.
  • The keyboard can be accessed.
  • Server-side processing.
  • And much more.

How to make use of it:

1. Include jQuery javascript library and Twitter’s Bootstrap framework in your web page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Include jQuery bootstrap multiselect plugin on the web page, after jQuery library.

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

3. Create a regular select listing.

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

4. Call the function on the select component to initialize the plugin.

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

5. All default plugin options to customize the multi-select.

$('#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: '<div class="btn-group" />',

  // 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',

  // custom templates
  templates: {
    button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
    Container: '<div class="multiselect-container dropdown-menu"></div>',
    filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><div class="input-group-prepend"><i class="input-group-text fas fa-search"></i></div><input class="form-control multiselect-search" type="text" /></div></div>',
    filterClearBtn: '<div class="input-group-append"><button class="multiselect-clear-filter input-group-text" type="button"><i class="fas fa-times"></i></button></div>',
    option: '<button class="multiselect-option dropdown-item"></button>',
    divider: '<div class="dropdown-divider"></div>',
    optionGroup: '<button class="multiselect-group dropdown-item"></button>',
    resetButton: '<div class="multiselect-reset text-center p-2"><button class="btn btn-sm btn-block btn-outline-secondary"></button></div>'
  }
  
});

6. Callback capabilities.

/**
 * 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;selected@call;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. API strategies.

// 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);

jQuery Multiple Select Plugin For Bootstrap, Bootstrap Multiselect Plugin/Github


See Demo And Download

Official Website(davidstutz): Click Here

This superior jQuery/javascript plugin is developed by davidstutz. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *