Demo
See the Pen Multiselect Dropdown – jQuery by Puneet Sharma (@webdevpuneet) on CodePen.
HTML
<div class="msdd">
<div class="msddTop"></div>
<div class="msddMenu" style="display:none;">
<ul>
<li class="filterAll">
<label><input name="filter" type="checkbox"> Filter All</label>
</li>
<li>
<label><input name="menu" value="check1" type="checkbox"> <i></i> label 1</label>
</li>
<li>
<label><input checked="true" name="menu" value="check2" type="checkbox"> <i></i> label 2</label>
</li>
<li>
<label><input checked="true" name="menu" value="check3" type="checkbox"> <i></i> label 3</label>
</li>
</ul>
</div>
</div>
CSS
.msdd {
position: relative;
width: 300px;
display: inline-block;
}
.msdd .msddTop {
border: 1px solid #cecece;
white-space: nowrap;
padding: 5px 10px;
border-radius: 5px;
height: 20px;
position: relative;
}
.msdd .msddTop:empty::after {
content: "Select from options...";
display: inline-block;
}
.msdd .msddTop span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #eaeaea;
display: inline-block;
margin-right: 5px;
}
.msdd .msddTop span.check1 {
background-color: red;
}
.msdd .msddTop span.check2 {
background-color: green;
}
.msdd .msddTop span.check3 {
background-color: blue;
}
.msdd .msddMenu {
border: 1px solid #cecece;
padding: 5px 10px;
border-radius: 5px;
position: absolute;
right: 0;
top: 100%;
min-width: 100%;
box-sizing: border-box;
display: none;
}
.msdd .msddMenu label {
display: block;
user-select: none;
}
.msdd .msddMenu .filterAll {
border-bottom: 1px solid #eaeaea;
padding-bottom: 5px;
margin-bottom: 5px;
}
.msdd .msddMenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.msdd .msddMenu ul li {
padding: 0;
margin: 0;
}
.msdd .msddMenu i {
width: 10px;
height: 10px;
border-radius: 50%;
background: #eaeaea;
display: inline-block;
}
.msdd .msddMenu input[value=check1] + i {
background-color: red;
}
.msdd .msddMenu input[value=check2] + i {
background-color: green;
}
.msdd .msddMenu input[value=check3] + i {
background-color: blue;
}
jQuery
const fillMsddTop = () => {
$('.msddTop').find('span').remove();
$("input:checkbox[name='menu']:checked").each(function(e){
$(".msddTop").append("<span class='" + $(this).val() + "'></span>");
});
}
$(document).ready(function(){
if( $("input[name='menu']").is(":checked") ){
fillMsddTop();
}
$( 'input[name="menu"]' ).change(function() {
fillMsddTop();
});
$( 'input[name="filter"]' ).click(function() {
if( $("input[name='filter']").is(":checked") ){
$("input:checkbox[name='menu']:not(:checked)").each(function(){
$(this).trigger('click');
});
}else{
$("input:checkbox[name='menu']:checked").each(function(){
$(this).trigger('click');
});
}
});
$( '.msddTop' ).click(function() {
$('.msddMenu').fadeToggle();
});
$('html').click(function(e) {
if (e.target.class != '.msdd' && $(e.target).parents('.msdd').length == 0) {
$('.msddMenu').hide();
}
});
});