Pretty jQuery Custom Select Box Plugin - tail.select

tail.select is a robust jQuery plugin that helps you style/customize the default single- or multi- select boxes and allows custom check icons for each status of (un)selected options.

Important NOTE:

The tail.select library now works as a vanilla JavaScript plugin. The latest demo, documentaition are now available on Powerful Single & Multiple Select Library – tail.select.

Basic Usage:

1. load the required tail-select.css in your document's head section.

<link rel="stylesheet" href="path/to/tail-select.css">

2. Load the necessary jQuery library together with jQuery tail.select and jQuery mousewheel plugin at the end of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="path/to/jquery.mousewheel.min.js"></script>
<script src="path/to/jquery.tail-select.min.js"></script>

3. Call the plugin with default settings on your existing select element and done.

$("select").tailSelect();

4. Full options. Override the following JS options during initialization to customize your select boxes.

// allows to remove a selected option on a single select field.
"single_allow_deselect":false,

// limits the number of selectable options.
"multi_limit":  0,

// text to be displayed if the user reached the "multi_limit".
"multi_limit_text":"You can't add more options",

// displays the number of selected options as well as the "multi_limit".
"multi_show_count":true,

// moves each selected option to the top of the options-list or to an own container.
"multi_moveto":  false,

// 
"multi_hide_selected":true,

// enables the option-description feature
"description":  false,

// hides each disabled option in the options-list
"hide_disabled":false,

// placeholder
"placeholder":   "Select an Option...",

// text to be displayed if all options are selected or if the select field has no option.
"text_empty":   "No Options available",

// custom icons.
"icons":  {
  "show":  true,
  "class":  "tailMS-icon",
  "icon_close":"tailMS-icon-close",
  "icon_pull-up":"tailMS-icon-pull-up",
  "icon_pull-down":"tailMS-icon-pull-down",
  "icon_optgroup":"tailMS-icon-optgroup",
  "icon_single-option":"tailMS-icon-single",
  "icon_single-hover":"tailMS-icon-single-hover",
  "icon_single-select":"tailMS-icon-single-selected",
  "icon_single-deselect":"tailMS-icon-single-deselect",
  "icon_multi-option":"tailMS-icon-multi",
  "icon_multi-hover":"tailMS-icon-multi-hover",
  "icon_multi-select":"tailMS-icon-multi-selected",
  "icon_multi-deselect":"tailMS-icon-multi-deselect"
}

5. Available events.

// triggered after the Tail.Select field is fully initialized.
$("select").on("tailSelect:ready", function(event, id, selector, element){
  // do something
});

// triggered on each Select and De-Select action.
$("select").on("tailSelect:change", function(event, option, selected){
  // do something
});

// triggered if the user reached the limit of an option field.
$("select").on("tailSelect:limit", function(event, number, limit){
  // do something
});

// triggerd by the user or also by the initialization.
$("select").on("tailSelect:empty", function(event, complete, group){
  if(complete === true){
    makeIt_cooler();
  } else {
    makeIt_awesome(this, group);
  };
});

Changelog:

v0.4.2 (2018-10-17)

• update.

---

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