Flexible Multiple Select Widget For jQuery UI - multiSelect.js

Flexible Multiple Select Widget For jQuery UI - multiSelect.js

multiSelect.js is a jQuery plugin (jQuery UI) to create a flexible, multi-language, user-friendly multiple select dropdown with support for checkboxes, check/uncheck all, live filtering and on/close animations.

1. Include the necessary jQuery and jQuery UI libraries on the html page.

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

2. Include the jQuery multiSelect.js plugin's main files on the page.

<link rel="stylesheet" href="jquery.multiselect.css">
<script src="jquery.multiselect.js"></script>

3. Include the jQuery multiSelect.js plugin's filtering extension when needed.

<link rel="stylesheet" href="jquery.multiselect.filter.css">
<script src="jquery.multiselect.filter.js"></script>

4. Include a language file of choice on the page. Supported languages:

  • br
  • cs
  • de
  • es
  • fr
  • hu
  • it
  • ja
  • pl
  • ru
  • tr
  • zh-cn
  • zh-tw
<script src="i18n/jquery.multiselect.de.js"></script>
<script src="i18n/jquery.multiselect.filter.de.js"></script>

5. Call the function on the target multiple select and done (option group is supported as well).

<select name="example" multiple="multiple" size="5">
  <optgroup label="Group One">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </optgroup>
  <optgroup label="Group Two">
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
  </optgroup>
</select>
$(function(){
  $("select").multiselect();
});

6. Full plugin options with default values.

$("select").multiselect({
  // shows header
  header: true,
  // height
  height: 175,
  // min width
  minWidth: 225,
  // additional classes
  classes: '',
  // custom text
  checkAllText: 'Check all',
  uncheckAllText: 'Uncheck all',
  noneSelectedText: 'Select options',
  // shows check/uncheck all links
  showCheckAll: true,
  showUncheckAll: true,
  // text for selected options
  selectedText: '# selected',
  selectedList: 0,
  // clise icon
  closeIcon: 'ui-icon-circle-close',
  // show/hide animations
  show: null,
  hide: null,
  // auto open
  autoOpen: false,
  // allows to select multiple options
  multiple: true,
  // position options
  position: {},
  // where to append the multiple select to
  appendTo: null,
  // menu width
  menuWidth:null,
  // list separator
  selectedListSeparator: ', ',
  // disables input on toggle
  disableInputsOnToggle: true,
  // grouped columns
  groupColumns: false
  
});

7. Default options for the filtering extension.

$("select").multiselectfilter({
  // The text to appear left of the input.
  label: 'Filter:',
  // The width of the input in pixels. 
  width: null, 
  // The HTML5 placeholder attribute value of the input.
  placeholder: 'Enter keywords',
  // A boolean value denoting whether or not to reset the search box & any filtered options when the widget closes. 
  autoReset: false,
  // in milliseconds
  debounceMS: 250
});

8. Callbacks and events.

$("select").multiselect({
  click: function(event, ui){
    $callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
  },
  beforeopen: function(){
    $callback.text("Select about to be opened...");
  },
  open: function(){
    $callback.text("Select opened!");
  },
  beforeclose: function(){
    $callback.text("Select about to be closed...");
  },
  close: function(){
    $callback.text("Select closed!");
  },
  checkAll: function(){
    $callback.text("Check all clicked!");
  },
  uncheckAll: function(){
    $callback.text("Uncheck all clicked!");
  },
  optgrouptoggle: function(event, ui){
    var values = $.map(ui.inputs, function(checkbox){
       return checkbox.value;
    }).join(", ");
    
    $callback.html("Checkboxes " + (ui.checked ? "checked" : "unchecked") + ": " + values);
  }
});

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

  • Publication date: 16.01.2018
  • Source