Written in JavaScript LESS CSS
Supported
tail.select is back

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
Check out our new Themes!

A beautiful Select Field

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

Show Example Code
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!

Show Example Code
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.

Show Example Code
HTML Structure
<select class="select" 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.

Show Example Code
HTML Structure
<select class="select-description" multiple>
    <optgroup label="[...]">
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
    </optgroup>
</select>
JavaScript Code
tail.select(".select-description", {
    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.

Show Example Code
HTML Structure
<select class="select-[...]" multiple>
    <optgroup label="[...]">
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
    </optgroup>
</select>
JavaScript Code
// Left Select
tail.select(".select-deselect", {
    search: true,
    descriptions: true,
    deselect: true,
});

// Right Select
tail.select(".select-limit", {
    search: true,
    descriptions: true,
    multiLimit: 10
});
We need your Support

We need your help to make the tail.select script as comfortable and stable as possible!
Please report each issue and request your ideas and suggestions on our Github Repository!

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.

Show Example Code
HTML Structure
<select class="select-move" multiple>
    <optgroup label="[...]">
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
        <option data-description="[...]">[...]</option>
    </optgroup>
</select>

<div class="tail-move-container"></div>
JavaScript Code
tail.select(".select-move", {
    search: true,
    descriptions: true,
    hideSelected: true,
    hideDisabled: true,
    multiLimit: 15,
    multiShowCount: false,
    multiContainer: ".tail-move-container"
});

A manipulatable Select Field

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

Show Example Code
HTML Structure
<select class="select-manipulatable" multiple></select>
JavaScript Code
var first = select(".select-mani-main", {
   classNames: "default white",     // For our demonstration only
   descriptions: true,
   deselect: true,
   stayOpen: null,
   sortItems: "ASC"
});
var games = select(".select-main-games", {
   search: true,
   classNames: "default white",     // For our demonstration only
   descriptions: true,
   sortGroups: "ASC",
   sortItems: "ASC",
   placeholder: "Select some Games...",
   multiPinSelected: true,
});
games.updateLabel("← Select a Developer first!");

// Hook First
first.on("change", function(item, state){
   if(state !== "select"){
       return;
   }
   if(item.group == "Remove Developer"){
       switch(item.key){
           case "activision":  //@Fallthrough
           case "bethesda":    //@Fallthrough
           case "ubisoft":     //@Fallthrough
           case "bioware":     //@Fallthrough
           case "deep-silver":
               var val = (item.key == "bioware")? "BioWare": item.key;
               val = val.replace("-", " ").replace(/(?:^\w|[A-Z]|\b\w)/g, function(m, i){
                   return m.toUpperCase();
               });
               break;
           case "cd-project":
               var val = "CD Project RED";
               break;
       }
       if(val){
           first.options.unselect(item.key, item.group, true);
           first.disable();

           var items = [].concat(Object.keys(games.options.items[val]));
           for(var l = items.length, i = 0; i < l; i++){
               games.options.remove(items[i], val, false);
           }
           games.query();
           games.updateLabel("← Select a Developer first!");

           first.enable();
           first.options.move(item, undefined, "#");
       }
   } else {
       first.options.unselect(item.key, item.group, true);
       first.disable();
       ajax(item.key, function(items){
           games.options.add(items);
           first.enable();
           first.options.move(item, undefined, "Remove Developer");
       });
   }
});

A hackable Select Field

The magic of Hooks and Callbacks (Example for Issue #3).