jQuery tail.select Plugin Examples

Enable JavaScript

You have disabled JavaScript and this is a demonstration of a Script written in JavaScript.
Enable JavaScript in your Browser if you want to use, test and show the Tail.Select jQuery plugin.
Single Select Field
Browser Default Tail.Select
The default single Tail.Select Field without any option-parameter. View Source
HTML Code: 
<select placeholder="Select a Character..." class="tail-select">
	<option value="Richard Dean Anderson">Jack O'Neill</option>
	<option value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select").tailSelect();
Multiple Select Field
Browser Default Tail.Select
The default multiple Tail.Select Field without any option-parameter. View Source
HTML Code: 
<select placeholder="Select one or more Characters..." multiple="multiple" class="tail-select">
	<option value="Richard Dean Anderson">Jack O'Neill</option>
	<option value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select").tailSelect();
Tail.Select with Pre-Defined Options
Single Select Field Multiple Select Field
The Tail.Select field with pre-disabled and pre-selected items. (Also without any option parameter) View Source
HTML Code: 
<select placeholder="Select one or more Characters..." multiple="multiple" class="tail-select">
	<option value="Richard Dean Anderson">Jack O'Neill</option>
	<option value="Amanda Tapping" selected="selected">Samantha Carter</option>
	<option value="Christopher Judge" disabled="disabled">Teal'c</option>
	<option value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select").tailSelect();
Tail.Select with Groups
Single Select Field Multiple Select Field
The Tail.Select field supports also the optgroup element. (Also without any option parameter) View Source
HTML Code: 
<select placeholder="Select one Character..." id="optgroup-single" class="tail-select">
	<optgroup label="Stargate SG-1">
		<option value="Richard Dean Anderson">Jack O'Neill</option>
		<option value="...">...</option>
	</optgroup>
	<optgroup label="Stargate Atlantis">
		<option value="Joe Flanigan">John Sheppard</option>
		<option value="...">...</option>
	</optgroup>
</select>
JavaScript Code: 
$(".tail-select").tailSelect();
Tail.Select with Movement
Multi Select Field (With "multi_moveto": "top") The same as left, but with Groups
The Tail.Select field with the option to move selected options always on the top of the options-list. View Source
HTML Code: 
<select placeholder="Select one or more Characters..." multiple="multiple" class="tail-select-list">
	<option value="Richard Dean Anderson">Jack O'Neill</option>
	<option value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select-list").tailSelect({"multi_moveto": "top"});

Multi Select Field (With "multi_moveto": "container") The same as left, but with Groups
The Tail.Select field with the option to move selected options always to an own container. View Source
HTML Code: 
<select placeholder="Select one or more Characters..." multiple="multiple" class="tail-select-container">
	<option value="Richard Dean Anderson">Jack O'Neill</option>
	<option value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select-container").tailSelect({"multi_moveto": "container"});
Tail.Select with Descriptions
Single Select Field (With "single_allow_deselect": true) Multiple Select Field (With "multi_limit": 5)
The Tail.Select field with an description on each single option. View Source
HTML Code: 
<select placeholder="Select one Character..." class="tail-select-description">
	<option data-description="Actor: Richard Dean Anderson" value="Richard Dean Anderson">Jack O'Neill</option>
	<option data-description="..." value="...">...</option>
</select>
JavaScript Code: 
$(".tail-select-description").tailSelect({"description": true});
Tail.Selects in Love
This Select Field (With "single_allow_deselect": true) Manipulates This (With "hide_disabled": true)
Manipulate one Tail.Select field with another one. View Source
HTML Code: 
<select id="tail-select-male" class="tail-select-male">
	<option value="Option 1-3">Enables Option 1 - 3</option>
	<option value="Option 4-6">Enables Option 4 - 6</option>
	<option value="Option 7-9">Enables Option 7 - 9</option>
</select>
<select id="tale-select-female" class="tail-select-female">
	<option value="Option 1" disabled="disabled">Option 1</option>
	<option value="Option 2" disabled="disabled">Option 2</option>
	<option value="Option 3" disabled="disabled">Option 3</option>
	<option value="Option 4" disabled="disabled">Option 4</option>
	<option value="Option 5" disabled="disabled">Option 5</option>
	<option value="Option 6" disabled="disabled">Option 6</option>
	<option value="Option 7" disabled="disabled">Option 7</option>
	<option value="Option 8" disabled="disabled">Option 8</option>
	<option value="Option 9" disabled="disabled">Option 9</option>
</select>
JavaScript Code: 
$(".tail-select-male").bind("tailSelect:change", function(event, option, selected){
	if($(option).val() == "Option 1-3"){ enable = [0, 1, 2]; }
	if($(option).val() == "Option 4-6"){ enable = [3, 4, 5]; }
	if($(option).val() == "Option 7-9"){ enable = [6, 7, 8]; }
	
	if(typeof(enable) !== "undefined" && selected === true){
		$(".tail-select-female").tailSelect("enable", "item", enable);
	} else {
		$(".tail-select-female").tailSelect("disable", "all");
	};
});