The tail.select script is back, completely rewritten in pure vanilla JavaScript and ready to beautify your (multiple) select fields again and now even a lot better as the deprecated jQuery Version back in 2014!
Wanna see tail.select in action?
Wanna translate tail.select in your language?
- Compatible with all modern browsers, and also for IE >= 9.
- Supports Single and Multiple Select fields, also deselect- and limitable!
- Offers a Search field within the dropdown list to find the desired options quickly!
- Offers a Description text to describe each single option!
- Allows to manipulate (add, edit and delete) each single option during the runtime.
- Bindings for the jQuery and MooTools library and usable as AMD.
- No dependencies, just include and use it!
- Event Listeners to bind your own function on each action.
- ... and many settings to configure the environment and its behavior!
It's recommended to use the Published Releases instead of downloading the master branch, because the master branch may contains 'unreleased' changes, which may not work as expected! You can download the latest published tail.select Release as .tar or as .zip archive, or by using NPM or YARN:
npm install tail.select --save
yarn add tail.select --save
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/
The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/tail.select.css" />
<!-- <link type="text/css" rel="stylesheet" href="css/tail.select-{theme}.css" /> -->
</head>
<body>
<script type="text/javascript" src="js/tail.select.min.js"></script>
<!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> -->
<select>
<!-- Your <optgroup> and <option> Elements -->
</select>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
tail.select("select", { /* Your Options */ });
});
</script>
</body>
</html>Please check out GitHubs Wiki Pages to read more about each single option!
tail.select("select", {
width: null,
height: 350,
classNames: null,
placeholder: null,
deselect: false,
animate: true,
openAbove: null,
stayOpen: false,
startOpen: false,
multiple: false,
multiLimit: -1,
multiShowCount: true,
multiContainer: false,
multiSelectAll: false, // NEW IN 0.4.0
multiSelectGroup: true, // NEW IN 0.4.0
descriptions: false,
items: {},
sortItems: false,
sortGroups: false,
search: false,
searchFocus: true,
searchMarked: true,
csvOutput: false,
csvSeparator: ",",
hideSelect: true,
hideSelected: false,
hideDisabled: false,
bindSourceSelect: false,
cbLoopItem: undefined // NEW IN 0.4.0
cbLoopGroup: undefined // NEW IN 0.4.0
});Awesome Help by Awesome Companies and Projects