import "pfkl-select/vselect/vselect.min.js";
$('#my-select').vSelect({
settings...
});
@import "~pfkl-vselect/vselect/vselect";
<select name="" id="my-select" multiple>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Bakery">
<option value="bread">Bread</option>
<option value="bun">Bun</option>
<option value="loaf">Loaf</option>
</optgroup>
<option value="vegetables">Vegetables</option>
<option value="meat">Meat</option>
<option value="grass">Grass</option>
</select>
Allowed only one or multiple selection.
multiSelect: true|false
Default is true
Custom placeholder text.
placeholder: 'Please select'
Add a check all option to the list. Only applicable if multiSelect is true.
checkAll: true|false
Default is true
Label text for check all option.
checkAllLabel: 'All'
Option group is expanded or collapsed by default.
expanded: true|false
Default is true
Selected options display style.
display: 'sum'|'values'
display: 'sum', eg. output: 2 option(s) selected
display: 'values', eg. output: Apple; Banana; Orange
Default is 'sum'
Set custom tray height.
trayHeight: '###px'|'auto'
Default is '240px'
true: tray display as overlay dropdown, false: tray display as inline block
dropdown: true|false
Default is true
true: let user seach option via an search input box, false: no search input box.
search: true|false
Default is false
-1: match string with any position of the label text, 0: match only from beginning of label text, Any integer number above 0: only match position from given number.
searchPosition: -1|0|#
Default is -1
On change call back function. values: Current changed option, options: entire options collection.
onChange: function(values, options) {}
Uncheck/unselect all options.
$('class/id').data('vSelect').resetOptions();
Added resetOptions method.
Added new settings option - searchPosition.
Added search feature.
Close tray when clicked outside of vSelect container.
Bug fix - hide original select element.
Fix a bug where initialise by class name is broken.
Enabled preselected options.
Remove console log.
Bug fix.
<option> accepts disabled property.
Any css class added to <option> will be included in the vSelect option wrapper.
Tips: add css class to indent options, to fake sub options for grouping.
- Single selection mode - tray will automatically closed once an option is selected.
- Added unique id to vselect-container.
- Bug fixes.