jQuery Plugin For Multi Select List with Checkboxes - MultiSelect

jQuery Plugin For Multi Select List with Checkboxes - MultiSelect
File Size: 14.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MultiSelect is a jQuery plugin that transforms normal multi select list into a multi-column dropdown list with checkboxes.

Installation:

# NPM
$ npm install jQuery-MultiSelect --save

# Bower
$ bower install jQuery-MultiSelect

How to use it:

1. Include jQuery library and the jQuery multiselect plugin's files in the html page.

<script src="jquery.min.js"></script>
<script src="jquery.multiselect.js"></script>

2. Call the plugin on the multiple select element.

$('select[multiple]').multiselect({
    /* OPTIONS */
});

3. Available options.

$('select[multiple]').multiselect({

  columns: 1,     // how many columns should be use to show options
  search : false, // include option search box

  // search filter options
  searchOptions : {
      delay        : 250,                  // time (in ms) between keystrokes until search happens
      showOptGroups: false,                // show option group titles if no options remaining
      searchText   : true,                 // search within the text
      searchValue  : false,                // search within the value
      onSearch     : function( element ){} // fires on keyup before search on options happens
  },

  // plugin texts
  texts: {
      placeholder    : 'Select options', // text to use in dummy input
      search         : 'Search',         // search input placeholder text
      selectedOptions: ' selected',      // selected suffix text
      selectAll      : 'Select all',     // select all text
      unselectAll    : 'Unselect all',   // unselect all text
      noneSelected   : 'None Selected'   // None selected text
  },

  // general options
  selectAll          : false, // add select all option
  selectGroup        : false, // select entire optgroup
  minHeight          : 200,   // minimum height of option overlay
  maxHeight          : null,  // maximum height of option overlay
  maxWidth           : null,  // maximum width of option overlay (or selector)
  maxPlaceholderWidth: null, // maximum width of placeholder button
  maxPlaceholderOpts : 10, // maximum number of placeholder options to show until "# selected" shown instead
  showCheckbox       : true,  // display the checkbox to the user
  optionAttributes   : [],  // attributes to copy to the checkbox from the option element

  // Callbacks
  onLoad        : function( element ){},  // fires at end of list initialization
  onOptionClick : function( element, option ){}, // fires when an option is clicked
  onControlClose: function( element ){}, // fires when the options list is closed

  // @NOTE: these are for future development
  minSelect: false, // minimum number of items that can be selected
  maxSelect: false, // maximum number of items that can be selected

});

4. API methods.

// loadOptions( options, overwrite, updateSelect )
$('select[multiple]').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false
}]);

// updates settings
$('select[multiple]').multiselect( 'settings', { columns: 2 });

// disables the plugin
$('select[multiple]').multiselect( 'unload' );

// reloads the plugin
$('select[multiple]').multiselect( 'reload' );

// resets the plugin
$('select[multiple]').multiselect( 'reset' );

// enables/disables
$('select[multiple]').multiselect( 'disable', true ); $('select[multiple]').multiselect( 'disable', false );

Change log:

v2.4.6 (2017-11-10)

  • Add check for multiple attr on select element during init

v2.4.5 (2017-11-08)

  • Fixed: Not displaying the Disabled Default selected value

v2.4.4 (2017-11-01)

  • more keyboard nav support
  • moved ms-active class up to ms-options-wrap for targeting purposes
  • added ms-has-selections for when there are selected options

2017-10-14

  • v2.4.3: exclude disabled options from (un)select all

2017-09-08

  • v2.4.2: updated documentation

2017-08-05

  • v2.4.1: Fix issue with maxWidth option.

2017-07-22

  • v2.4: Fix issue with searching and (un)select all functionality not working

2017-06-17

  • v2.3.13: Fix disable method issue, bugfix with hasClass() call

2017-06-03

  • performance optimization

2016-03-11

  • bugfix.

2016-01-15

  • bugfix.

2015-12-11

  • bugfix.

2015-11-20

  • New search & select all options, default placeholder text

2015-11-19

  • JS update
  • bugfix

2015-06-12

  • bugfix

2015-06-11

  • touch device scroll bugfix

2015-06-10

  • browser bug fixes (mainly safari)

This awesome jQuery plugin is developed by nobleclem. For more Advanced Usages, please check the demo page or visit the official website.