tail.select - Beautify Select Fields
Replace and Improve your HTML <select>
fields with style and without jQuery!
The tail.select script is back, re-written in vanilla JavaScript and ready to beautify and
extend your HTML <select>
fields... again! Add a search bar, multi-selection utilities (such as
select all or none buttons), deselectability on single select fields, a perfect design and many
more user-friendly functions to your web-application.
Wanna see tail.select in action?
Wanna translate tail.select in your language?
Support
You really like my tail.select script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)
Features
- Beautiful. 5 different Designs in many color schemes...
- Extensive.
- Search bar to find options quickly...
- All / None optgroup selection buttons...
- Add, Edit, Delete and Modifiy options at any time...
- De-selection on single select fields...
- ... and way more ...
- Configurable. 36 settings and 3 bindable events...
- Translatable. Already available in 10 languages...
- Zero Dependencies. And written in vanilla JavaScript...
- Free/To/Use. Because it's MIT licensed <3
Install & Embed
The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save
yarn add tail.select --save
bower install tail.select --save
Using a CDN
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/
https://unpkg.com/tail.select/
Thanks To
- Octicons for the cute Icons
- jsCompress for the Compressor
- prismJS for the Syntax highlighting library
- MenuSpy for the Menu Navigation
Translations
- Anthony Rabine / French Translation
- Igor / Brazilian Portuguese Translation
- Noxludio / Finnish Translation
- Roman Yepanchenko / Russian Translation
- elPesecillo / Spanish Translation
- Alberto Vincenzi / Italian Translation
- WoxVold / Norwegian Translation
- Spritus / Turkish Translation
Documentation
The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.
- Install & Embed
- Default Usage
- Public Options
- Public Methods
- Events & Callbacks
- Internal Variables & Methods
- HowTos, Tips & Tricks
Files
The tail.select
package contains different JavaScript files:
js/tail.select(.min).js
The main JavaScript withen
tranlation strings only.js/tail.select-full(.min).js
The main JavaScript with ALL available translations.js/tail.select-es6(.min).js
An experimental ECMAScript 2015 / ES6 Module version (includes all translations).langs/tail.select-all(.min).js
Just ALL translation strings itself.langs/tail.select-{locale}.js
Just the {locale} translation strings.
Basic Instructions
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element
, a NodeList
, a HTMLCollection
, an Array with Element
objects or
just a single selector as string
, which calls the querySelectorAll()
method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> --> My Option
Default options
Please check out GitHubs Wiki Pages to read more about each single option!
tail;
Copyright & License
Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET