Demos

Last update: Jul 15, 2015

Currently this document is a bit chaotic and unstructured, but i’m working on it. For now i’ll just keep on piling up all kinds of demos of features/configs that might come in handy.

In case you’ll be stumbling upon some bugs and if you think i might be missing out on something important, make sure to hit the projects issues page.

Simple setup

Simplest setup. Make sure jQuery and jQuery UI are loaded before initialising the multiselect widget.

Demo

Markup

<select class="multiselect" multiple>
  <option value="1">Lorem (1)</option>
  <option value="2">Ipsum (2)</option>
  <option value="3">Dolor (3)</option>
  <option value="4">Sit (4)</option>
  <option value="5">Amet (5)</option>
</select>

JS

(function ($) {
  $(function () {
    $('.multiselect').multiselect();
  });
})(jQuery);

Minimal setup

And now for the minimal, in case you don't need the filter and stuff - just a single-line multi-select.

Demo

JS
```
$('.multiselect').multiselect({
  minItemFilter: -1,
  bulkActions: false
});
```
Hide checkbox

This option is only recommended if you are planning of an other way to show that your multi-select is not just a regular dropdown-form, eg by using the given css-selectors.

FYI: Selected ui-options will be given the call ui-multiselect--selected.

Demo

JS
```
$('.multiselect').multiselect({
  showCheckbox: false
});
```
Max Items

The maxItems option let you decide how many selected items should be shown in the ui-title, before they are replaced by a general title. Set it to -1 and no trivial-value will be shown (see demo 2).

For customizing the titles see Custom title.

Demo 1

Show only one trivial

JS
```
$('.multiselect').multiselect({
  maxItems: 1
});
```
Demo 2

Show all trivials

JS
```
$('.multiselect').multiselect({
  maxItems: -1
});
```

Custom title

## will be replaced by the total number of items for displayTextSG and displayTextPL.
@@ will be replaced by the currently selected number of items for displayTextPL.

Demo

In german

JS

$('.multiselect').multiselect({
  defaultDisplayTitle: 'Bitte wählen', // 'No value selected'
  displayTextSG: 'Ein Element ausgewählt', // '1 of ## value selected'
  displayTextPL: '@@ Elemente ausgewählt', // '@@ of ## values selected'
  bulkAllText: 'Alle',
  bulkNoneText: 'Keine',
  maxItems: 0 // optional, for demo
});

Disabling Options

Simply en/disable an option in the ui by en/disabling its origin (select > option). the ui will listen to changes in the dom and update itself.

Demo

Disbaled options

JS
```
// ui init
$('.multiselect').multiselect();

// disable option on click
$('button.disable').on('click', function () {
  $('.multiselect [value="2"]').prop('disabled', true);
});
```
Filter

The default option value for the minimal number of options in a select-field for the filter to appear is set to 5; this way you can easily assign a global setup for your multiselects and don't have to deal seperatly for each multiselect if a filter should be shown.

Demo (> min number of options)

try filtering for 'JS' or 'jQuery'.

Demo 2 (< min number of options)

Demo 3 (adjusted min number of options)
```
$('.multiselect').multiselect({
  minItemFilter: 1
});
```
Bulk-actions

Bulk-operations are provided for multi-selects only (doesn't make sense for singles, eh?) and can be enabled by using the `bulkActions` option.

Demo 1 - default behavior

Disbaled options

Demo 2 - disabled

Disbaled options

JS
```
$('.multiselect').multiselect({
  bulkActions: false
});
```

Optgroups are available for single- and multi-selects. for multi-selects a bulk-operation feature is additionally enabled, giving the user an option to select an entire group with just one click - no additional config needed.

Demo 1

Markup

<select class="multiselect" multiple>
  <optgroup label="Group 1">
    <option>Nulla vitae elit</option>
    <option>Libero a pharetra augue</option>
    <option>Nullam id dolor id</option>
  </optgroup>

  <optgroup label="2nd Group">
    <option>Nibh ultricies vehicula</option>
    <option>Ut id elit</option>
  </optgroup>

  <optgroup label="No. 3">
    <option>Curabitur blandit tempus</option>
    <option>Porttitor Vestibulum</option>
    <option>Id ligula porta</option>
    <option>Felis euismod semper</option>
  </optgroup>

  <optgroup label="Last random label">
    <option>Sed posuere consectetur</option>
    <option>Est at lobortis</option>
    <option>Praesent commodo</option>
  </optgroup>
</select>

Overview

Demo

Markup

JS

Demo

JS

Demo

JS

Demo 1

JS

Demo 2

JS

Demo

JS

Demo

JS

Demo (> min number of options)

Demo 2 (< min number of options)

Demo 3 (adjusted min number of options)

Demo 1 - default behavior

Demo 2 - disabled

JS

Demo 1

Markup

Demo 2 Optgroups for single-selects