A JQuery Plugin for super-flexible Dropdowns based on dot.js Templates. Read more about dot.js and client-side templates in my blog post. Hey, and it's just 2.4 kb! (without doT, which is another 1.2 kb)

View the Project on GitHub

Clarify - A Frontend Development Toolkit

Clarify - Frontend Development Toolkit

Basic Example

Advanced Example with custom data


<select data-template="#dropdown">
    <option value="1" selected="selected">Switzerland</option>
    <option value="2">Germany</option>
    <option value="3">United States</option>

dot.js Templates

<script id="dropdown-selected" type="text/x-dot-template">
<script id="dropdown" type="text/x-dot-template">
<div class="dropdown" tabindex="1">
    <div class="selected">{{=it.selected.label}}<i>&darr;</i></div>
        {{~it.items :item:index}}
        <li data-index="{{=index}}">{{=item.label}}</li>

Basic Usage


Callback on selection

    'changed': function(data) {
        // handle change

Add additional data to your markup

For example you want to add a people count for every country like in the advanced example.

<select data-template="#dropdown-data">
    <option value="1" selected="selected" data-people="756">Switzerland</option>
    <option value="2" data-people="200">Germany</option>
    <option value="3" data-people="3'700">United States</option>
    <option value="4" data-people="19">Sweden</option>
    <option value="5" data-people="240">France</option>
    <option value="6" data-people="2">Australia</option>

... and use it in your template with


CSS Example Template

.dropdown {
    position: relative;
    width: 300px;
    outline: none;
.dropdown > .selected {
    position: relative;
.dropdown.focus > .selected,
.dropdown:focus > .selected {
    outline: none;

.dropdown > .selected:hover,
.dropdown > .selected:focus {
    cursor: pointer;
.dropdown > .selected i {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    line-height: 40px;
.dropdown.open > .selected {

.dropdown ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 1;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 0;
.dropdown ul li {
    display: block;
    cursor: pointer;
.dropdown ul li.selected {
.dropdown ul li:last-child.selected {

.dropdown ul li {
    position: relative;
    display: block;

.dropdown ul li.hover { 



Coded by Roger Dudler http://twitter.com/rogerdudler