dropdown.dot.js

Basic Example

Switzerland Germany United States Sweden France Australia

Advanced Example with custom data

Markup

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

dot.js Templates

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

Basic Usage

$('select').dropdown();

Callback on selection

$('select').dropdown({
    '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>
</select>

... and use it in your template with

{{=item.people}}

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 { 

}

Credits

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