Getting started
Enable multi-select on UL or OL lists, by adding the data-multiselect attribute to the element. The attribute value should be an identifier for the multi-select.
<ul data-multiselect="my-things">
<li>...</li>
...
</ul>
Features
Multi select provides list item selection, with support for CMD ⌘ or CTRL, for toggling, and range selection using SHIFT ⇧.
Data bindings
You can bind sinks for your multi-selects, a simple variant of data-binding. Simply add the data-multiselect-bind attribute to any element that should receive the selection. The attribute value should be the identifier to bind to.
<span data-multiselect-bind="my-things">0</span>Data API
Each bound element will receive the multiselect-change event with a payload of the current selection. The payload is passed as the second argument to the event handler function (event, payload) { ... } and contains an array of the selected elements.
(function($) {
$('#counter').on('multiselect-change', function(_, selected) {
$(this).text(selected.length);
});
})(jQuery);