Stylish Multi Select Box Plugin with jQuery - selectable
File Size: | 19.4 KB |
---|---|
Views Total: | 2911 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

selectable is a jQuery plugin to create a single or multi select box which allows you to insert options form a popup window containing a list of preset data. To remove a option, just click on what you just selected inside the select box, so that it can also be used as a tags or tokens input.
How to use it:
1. Load the selectable.css
in the header and the jquery.selectable.js
in the footer.
<head> ... <link href="css/selectable.css" rel="stylesheet" type="text/css"> ... </head> <body> ... <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/jquery.selectable.js"></script> </body>
2. The Html structure to build a multiple select box with pre-defined options.
<div id="demo" class="selectable" data-title="Selecting a Programming Language" data-placeholder="Selecting a Programming Language"> <span data-value="option1" class="selectable-option">PHP</span> <span data-value="option2" class="selectable-option">Ruby</span> <span data-value="option3" class="selectable-option">Python</span> <span data-value="option4" class="selectable-option">JavaScript</span> <span data-value="option5" class="selectable-option">Swift</span> ... </div>
3. Call the plugin on the parent element and set the options for the select box.
$('#demo').Selectable({ // single or multiple select box allowMultipleSelect: true, minLengthForSearch: 3, fieldName: 'language-field', fieldId: 'language-field-ID', popupTitle: 'Which Programming Languages do you like?', placeholder: 'Select a Programming Language', searchDelay: 50 }); });
4. Public methods and events.
// events initialized: function() { console.log('#demo -> initialized') }, selectionAdded: function() { console.log('#demo -> selectionAdded') }, selectionRemoved: function() { console.log('#demo -> selectionRemoved') }, activeSelectionRemoved: function() { console.log('#demo -> activeSelectionRemoved') }, opening: function() { console.log('#demo -> opening') }, opened: function() { console.log('#demo -> opened') }, closing: function() { console.log('#demo -> closing') }, closed: function() { console.log('#demo -> closed') }, searching: function() { console.log('#demo -> searching') }, minSearchLengthNotReached: function() { console.log('#demo -> minSearchLengthNotReached') }, newButtonClicked: function() { console.log('#demo -> newButtonClicked') }, // The following three are only used when using AJAX searchFailed: function() { console.log('#demo -> searchFailed') }, optionsLoaded: function() { console.log('#demo -> optionsLoaded') }, noResults: function() { console.log('#demo -> noResult') }, // Methods $('.btn-kill').click($('#demo').data('Selectable').kill); $('.btn-val').click(function() { alert($('#demo').data('Selectable').val()); }); $('.btn-selectionCount').click(function() { alert($('#demo').data('Selectable').selectionCount()); }); $('.btn-open').click($('#demo').data('Selectable').open); $('.btn-close').click($('#demo').data('Selectable').close); $('.btn-removeSelection').click($('#demo').data('Selectable').removeSelection); $('.btn-search').click(function() { $('#demo').data('Selectable').open(); $('#demo').data('Selectable').search('Gravi'); }); $('.btn-addHiddenFieldToSearch').click(function() { $('#demo').data('Selectable').addHiddenFieldToSearch('name', 'val'); }); $('.btn-getNewButtonDOMElement').click(function() { console.log($('#demo').data('Selectable').getNewButtonDOMElement()); });
This awesome jQuery plugin is developed by elohr. For more Advanced Usages, please check the demo page or visit the official website.