tail.select script is back at tail.select.js, rewritten in vanilla javascript, and ready to beautify and expand HTML <select>
fields … again! Add a search bar, multi-selection utilities (like select all or no buttons), deselect in individual-specific fields, perfect design, and many more easy-to-use functions for your web application.
This library has been seized and there is version 0.6 in the works. It is a great library worth living on.
Support
- Do you really like my tail.select and want to support me and all my projects?
- Then I would be very grateful for a coffee! (Thanks to all the supporters)
Features:
- Beautiful. 5 different designs in many color schemes …
- Extensive.
- Search bar to find options quickly …
- All / None buttons …
- Options to add, edit, delete, and modify at any time …
- Deselecting single selected fields …
- … and way more …
- Configurable. 36 settings and 3 linkable events …
- Translatable. Already available in 10 languages …
- Zero Dependencies. And written in vanilla JavaScript …
- Free/To/Use. Because it’s licensed by the Massachusetts Institute of Technology <3
Must Read: Easy-to-Use Multi-Selection Plugin for Bootstrap 5/4 | BsMultiSelect
How to make use of it:
Install:
npm install tail.select.js --save yarn add tail.select.js --save bower install tail.select.js --save
Basic Instructions
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="css/tail.select-default.css"> </head> <body> <script src="js/tail.select.min.js"></script> <!-- <script src="langs/tail.select-{lang}.js"></script> --> <select> <option>My First Option</option> <option>My Second Option</option> <option>My Third Option</option> </select> <script> document.addEventListener('DOMContentLoaded', () => { tail.select('select', { // Your options here }); }); </script> </body> </html>
Default options
tail.select("select", { animate: true, // [0.3.0] Boolean classNames: null, // [0.2.0] Boolean, String, Array, null csvOutput: false, // [0.3.4] Boolean csvSeparator: ",", // [0.3.4] String descriptions: false, // [0.3.0] Boolean deselect: false, // [0.3.0] Boolean disabled: false, // [0.5.0] Boolean height: 350, // [0.2.0] Integer, null hideDisabled: false, // [0.3.0] Boolean hideSelected: false, // [0.3.0] Boolean items: {}, // [0.3.0] Object locale: "en", // [0.5.0] String linguisticRules: { // [0.5.9] Object "е": "ё", "a": "ä", "o": "ö", "u": "ü", "ss": "ß" }, multiple: false, // [0.2.0] Boolean multiLimit: Infinity, // [0.3.0] Integer, Infinity multiPinSelected: false, // [0.5.0] Boolean multiContainer: false, // [0.3.0] Boolean, String multiShowCount: true, // [0.3.0] Boolean multiShowLimit: false, // [0.5.0] Boolean multiSelectAll: false, // [0.4.0] Boolean multiSelectGroup: true, // [0.4.0] Boolean openAbove: null, // [0.3.0] Boolean, null placeholder: null, // [0.2.0] String, null search: false, // [0.3.0] Boolean searchConfig: [ // [0.5.13] Array "text", "value" ], searchFocus: true, // [0.3.0] Boolean searchMarked: true, // [0.3.0] Boolean searchMinLength: 1, // [0.5.13] Integer searchDisabled: true, // [0.5.5] Boolean sortItems: false, // [0.3.0] String, Function, false sortGroups: false, // [0.3.0] String, Function, false sourceBind: false, // [0.5.0] Boolean sourceHide: true, // [0.5.0] Boolean startOpen: false, // [0.3.0] Boolean stayOpen: false, // [0.3.0] Boolean width: null, // [0.2.0] Integer, String, null cbComplete: undefined, // [0.5.0] Function cbEmpty: undefined, // [0.5.0] Function cbLoopItem: undefined, // [0.4.0] Function cbLoopGroup: undefined // [0.4.0] Function });
Translations
- Anthony Rabine / French Translation
- Igor / Brazilian Portuguese Translation
- Noxludio / Finnish Translation
- Roman Yepanchenko / Russian Translation
- elPesecillo / Spanish Translation
- Alberto Vincenzi / Italian Translation
- WoxVold / Norwegish Translation
- Spritus / Turkish Translation
- 5ergiu / Romanian Translation
- achatzi78 / Greek Translation
Files
The tail.select
package contains different JavaScript files:
js/tail.select(.min).js
The main JavaScript withen
translation strings only.js/tail.select-full(.min).js
The main JavaScript with ALL available translations.langs/tail.select-all(.min).js
Just ALL translation strings themselves.langs/tail.select-{locale}.js
Just the {locale} translation strings.
See Demo And Download

Official Website(wolffe): Click Here
This superior jQuery/javascript plugin is developed by wolffe. For extra Advanced Usage, please go to the official website.