jQuery Plugin For The Multi-Select List Along With The Check boxes – MultiSelect

File Size:58.82 KB
Views Total:713
Last Update:March 14, 2018
Publish Date:December 26, 2017
Official Website:Go to website
License:MIT

Multiselect is a kind of jQuery plugin software that changes the simple kind of list into the multi column dropdown of the list in the form of the major check boxes. It is user-friendly and can be used in the simplest way to implement the drop down list in the jQuery plugin list. It works in an alphabetical manner that creates the chronological form. It works easily in statistic & dynamic form for the easily managed system. With the help of jQuery it removes and adds the columns & rows.

How to use :

1. Include jQuery library and the jQuery multiselect plugin’s :

<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 plugin 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, up<a href="https://www.jqueryshare.net/time-clock/">date</a>Select )
$('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 );

Done 🙂

 

Change Log

v2.4.7 (2017-12-01)

  • Fixed: updatePlaceholderText issue

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)