<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-sm-4">
<div class="dropdown-select">
<select placeholder="Select" multiple>
<option selected>Apple</option>
<option selected>Blackberry</option>
<option>HTC</option>
<option>Sony Ericson</option>
<option>Motorola</option>
<option>Nokia</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="dropdown-select">
<select placeholder="Select" multiple>
<option selected>Orange</option>
<option selected>Blackberry</option>
<option>HTC</option>
<option>Sony Ericson</option>
<optgroup label="Group Name">
<option>Nested option</option>
</optgroup>
<option>Motorola</option>
<option>Nokia</option>
</select>
</div>
</div>
</div>
.multi-select select {
display: none;
}
.multi-select {
width: 280px;
position: relative;
}
.multi-select dd,
.multi-select dt {
margin: 0px;
padding: 0px;
}
.multi-select ul {
margin: -1px 0 0 0;
}
.multi-select dd {
position: relative;
}
.multi-select p {
margin: 0;
}
.multi-select p span:after {
content: ', ';
}
.multi-select p span:last-child:after {
content: '';
}
.multi-select a,
.multi-select a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.multi-select a{
border-radius: 10px;
overflow: hidden;
}
.multi-select.selected a{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
}
.multi-select dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
position: relative;
width: 100%;
}
.multi-select dt a span,
.multi-select .multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.multi-select dd ul {
background-color: #ffffff;
border: 0;
color: #555;
display: none;
left: 0px;
padding: 15px;
position: absolute;
top: 2px;
width: 100%;
list-style: none;
height: 100px;
overflow: auto;
z-index: 1;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 1px solid #555;
margin-top: -2px;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.multi-select dd ul label {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 25px;
}
.multi-select dd ul li {
margin-bottom: 12px;
}
.multi-select dd ul li:last-child{
margin-bottom: 0;
}
.multi-select dd ul label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.multi-select dd ul label:hover input ~ .checkmark {
background-color: #ccc;
}
.multi-select dd ul label input:checked ~ .checkmark {
background-color: #2196F3;
}
.multi-select dd ul label .checkmark:after {
content: "";
position: absolute;
display: none;
}
.multi-select dd ul label input:checked ~ .checkmark:after {
display: block;
}
.multi-select dd ul label .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.multi-select span.value {
display: none;
}
.multi-select dd ul li a {
padding: 5px;
display: block;
}
.multi-select dd ul li a:hover {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
var selectOption = function(options) {
var v = {}
var root = this;
e = options.e;
select = e.find('select');
if (select.length !== 1 || select.prop("multiple") !== true) return;
select.hide();
plc = select.attr('placeholder');
e.addClass('multi-select');
$("<dt/>").appendTo(e);
dt = e.find('dt');
$("<a/>").appendTo(dt).attr("href", "#");
a = $(dt, e).find('a');
$("<span/>").appendTo(a).addClass('hida');
$("<p/>").appendTo(a).addClass('multiSel');
span = a.find('span');
p = a.find('p');
span.html(plc);
$("<dd/>").appendTo(e);
dd = e.find('dd');
$("<div/>").appendTo(dd).addClass('mutliSelect');
ms = dd.find('.mutliSelect');
$("<ul/>").appendTo(ms);
msUL = ms.find('ul');
o = select.children();
ind = 0;
this.construct = function() {
$.extend(v, this.init(options));
}
this.init = function(options) {
var options = {
e: e,
select: select,
plc: plc,
dt: dt,
a: a,
span: span,
p: p,
dd: dd,
ms: ms,
msUL: msUL,
o: o,
ind: ind
}
return options;
}
addOption = function(t) {
var value = t.html();
var checked = '';
if (t.prop("selected")) {
var title = t.val();
var html = '<span title="' + title + '">' + title + '</span>';
v.p.append(html);
v.span.hide();
checked = " checked";
}
$('<li/>').appendTo(v.msUL).append('<label><input type="checkbox" value="' + value + '"' + checked + ' ind="' + v.ind + '"/>' + value + '<span class="checkmark"></span></label>');
v.ind++;
}
this.toggleSelect = function() {
v.msUL.toggle();
}
this.checkClick = function() {
$('.mutliSelect input[type="checkbox"]', v.e).on('change', function() {
var i = $(this).attr('ind');
var title = $(this).val();
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
v.p.append(html);
v.span.hide();
$(v.select).find('option:eq(' + i + ')').prop({
selected: true
});
} else {
$('span[title="' + title + '"]', v.e).remove();
$(v.select).find('option:eq(' + i + ')').prop({
selected: false
});
}
if (v.p.html() == '') {
v.span.show();
}
});
}
this.selectItem = function() {
v.o.each(function() {
var tag = $(this).prop("tagName").toLowerCase();
if (tag == 'optgroup') {
$('<li/>').appendTo(v.msUL).append('<h3>' + $(this).attr('label') + '</h3>');
$(this).find('option').each(function() {
addOption($(this));
});
} else {
addOption($(this));
}
});
}
this.construct(options);
}
$.fn.dropdownSelect = function() {
$(this).each(function() {
e = $(this)
var options = {
e: e
}
var select = new selectOption(options);
console.log(ind)
select.selectItem();
a.on('click', function(i) {
select.toggleSelect();
i.preventDefault();
$(this).parents('.multi-select').toggleClass('selected');
})
select.checkClick()
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if ($clicked.parents().hasClass("multi-select")) {
$('.multi-select').not($clicked.parents('.multi-select')).removeClass('selected');
$('.multi-select').not($clicked.parents('.multi-select')).find('.mutliSelect ul').hide();
return false;
}
$('.mutliSelect ul').hide();
$('.multi-select').removeClass('selected');
});
}
$(window).on('load',function(){
$(".dropdown-select").dropdownSelect();
})
