Demo
Usage
Download manually or install via Bower:
bower install easyselect
Add jQuery (requires jQuery 1.4.2 or later) and plugin assets into the <head> element:
<link href="jquery.easyselect.min.css" rel="stylesheet">
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.easyselect.min.js" type="text/javascript"></script>
Place your multiple select element (<select multiple>) in the HTML:
<select id="foo" multiple>
<option>bar</option>
<option>baz</option>
</select>
Simply call easySelect() function on the element when the DOM is ready:
$(document).ready(function() {
$("#foo").easySelect();
});
Options
| Property | Default | Description |
|---|---|---|
| maxOption | 0 | Maximum number of selected options. (0: no limit) (integer) |
| removeIcon | "<span> ✖</span>" | HTML code for the remove icon on selected options. (string) |
| onKeyup | null | A function to trigger when user keyup on easySelect's input field. (function) |
Sample usage:
$('#select').easySelect({
maxOption: 5,
removeIcon: '<img src="icon.png" alt="x">'
});Methods
| Name | Description |
|---|---|
| refresh | Re-generates easySelect components according to current state of the select element. |
Sample usage:
$('#select').data('easySelect').refresh();