Multiselect dropdown

jQuery Multiselect

by dhavaljani

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/patosai/tree-multiselect.js/v1.14.5/jquery.tree-multiselect.min.css">
<script src="https://cdn.rawgit.com/patosai/tree-multiselect.js/v1.14.5/jquery.tree-multiselect.min.js"></script>
<select id="demo1" multiple="multiple">
  <option value="one" data-section="select all/top" selected="selected" data-index="1">One</option>
  <option value="two" data-section="select all/top" selected="selected" data-index="2">Two</option>
  <option value="three" data-section="select all/top" selected="selected" data-index="3" data-description="A natural number">Three</option>
  <option value="four" data-section="select all/top"  selected="selected" data-index="4">Four</option>
  <option value="five" data-section="select all/bottom" data-index="5">five</option>
    <option value="six" data-section="select all/bottom" data-index="6">six</option>
</select>
<!-- courtsey http://www.patosai.com/projects/tree-multiselect -->

CSS

body {
    background: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
}
div.tree-multiselect div.title>span.collapse-section {
    float: right;
    width: 16px;
    text-align: center;
    background-color: #fff;
    color: #0088cc;
}
div.tree-multiselect>div.selections {
    background: #fff;
}
div.tree-multiselect>div.selections>div.section, div.tree-multiselect>div.selected {
    max-height: 180px;
    overflow-y: auto;
}
div.tree-multiselect div.title{
    background: #eee;
    color: #444;
    padding: 2px;
}
div.tree-multiselect>div.selections>div.section>div.title {
    background: #0088cc;
    color: #fff;
    padding: 2px;
}
div.tree-multiselect>div.selections div.item {
    font-size: 12px;
}
div.tree-multiselect>div.selected>div.item {
    background: #fff;
    border: 1px solid #ccc;
    padding: 2px 5px;
    border-radius: 0;
}
div.tree-multiselect span.description, div.tree-multiselect span.remove-selected {
    padding: 0 3px;
    margin-right: 5px;
    background: #ccc;
    color: #fff;
    border-radius: 2px;
}

JavaScript

var options = { sortable: true };
$("select#demo1").treeMultiselect(options);