tail.select

HTML Select Fields as beautiful as never before

tail.select is back: Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

Version 0.5.19, Vanilla JS, Plain JS, ES6, GitHub




tail.select - Beautify Select Fields

Replace and Improve your HTML <select> fields with style and without jQuery!

A few notable features:

  • Beautiful (Multiple) Select Field
  • Awesome Search function
  • Move selected Options wherever you want
  • Over 30 Options & 5 Themes
  • Extend- and Translatable Environment
  • Hackable with 3 Callbacks & 3 Events
  • tail.select is back in plain vanilla JavaScript…
  • …and still Free/To/Use – MIT Licensed

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.

tail.select - In the wild

See tail.select in action on KMProperty.ie.

The search features optgroups, search (for really long lists) and quick select (All, None or each optgroup).

Enabling a dropdown is as easy as 🍦 Vanilla JavaScript -

tail.select('.select');
tail.select - KMProperty.ie
tail.select on KMProperty.ie

A beautiful Select Field

The tail.select fields below shows you the absolute standard, without any settings!

Single
Multiple
HTML Structure
<select class="select" multiple>
    <option>[...]</option>
    <option>[...]</option>
    <option>[...]</option>
</select>
JavaScript Code
tail.select(".select");

A grouped Select Field

It goes on without any setting, but with some more HTML Code to define some optgroup stuff!

Single
Multiple
HTML Structure
<select class="select" multiple>
    <optgroup label="[...]">
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select");

A finding Select Field

Our first line of (JavaScript) code enables the search field within the dropdown element.

Single Search
Multiple Search
HTML Structure
<select class="select-search" multiple>
    <optgroup label="[...]">
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select-search", {
    search: true
});

A descriptive Select Field

Just one option and some HTML stuff more and tail.select allows us some descriptive text.

Single Descriptions
Multiple Descriptions
HTML Structure
<select class="select-descriptions" multiple>
    <optgroup label="[...]">
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select-descriptions", {
    search: true,
    descriptions: true,
});

A limitable Select Field

You can allow to deselect single select fields, and you can limit the selection on multiple ones.

DeSelectable Single
Limit Multiple
HTML Structure
<select class="select-[...]" multiple>
    <optgroup label="[...]">
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select-deselect", {
    search: true,
    descriptions: true,
    deselect: true,
});
tail.select(".select-limit", {
    search: true,
    descriptions: true,
    multiLimit: 10
});

A movable Select Field

It's also possible to move your selections to an existing container elsewhere and hide the respective options within the dropdown field.

Move to an external Container
Move to the Label
HTML Structure
<select class="select-[...]" multiple>
    <optgroup label="[...]">
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select-deselect", {
    search: true,
    descriptions: true,
    hideSelected: true,
    hideDisabled: true,
    multiLimit: 15,
    multiShowCount: false,
    multiContainer: '.tail-move-container'
});
tail.select(".select-limit", {
    search: true,
    descriptions: true,
    hideSelected: true,
    hideDisabled: true,
    multiLimit: 15,
    multiShowCount: false,
    multiContainer: true
});

A manipulatable Select Field

A small example to show the power of the tail.select.options class.


A hackable Select Field

The magic of Hooks and Callbacks.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Tuesday, March 30, 2021 in Featured, JavaScript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy