Stylish Multi Select Box Plugin with jQuery - selectable

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

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.

  <link href="css/selectable.css" rel="stylesheet" type="text/css">

  <script src="//"></script>
  <script src="js/jquery.selectable.js"></script>

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>


3. Call the plugin on the parent element and set the options for the select box.


// 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-val').click(function() {

$('.btn-selectionCount').click(function() {




$('.btn-search').click(function() {

$('.btn-addHiddenFieldToSearch').click(function() {
  $('#demo').data('Selectable').addHiddenFieldToSearch('name', 'val');

$('.btn-getNewButtonDOMElement').click(function() {

This awesome jQuery plugin is developed by elohr. For more Advanced Usages, please check the demo page or visit the official website.