We Keep Coding

How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>

You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

Make selected text bold/unbold with jQuery

I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});

After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.

execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>

You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

newsfeed icon showing tiny box counter

<head>
<style>
.divTable {
display: table;
float: right;
height: 180px;
background-color: #0082CA;
}
.divTableBody {
display: table-row-group;
}
.divTableRow {
display: table-row;
}
.menuLink, .icon {
display: table-cell;
padding: 10px 0px;
}
.menuLink {
display: none;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
}
.menuLink a {
font-size: large;
text-decoration: none;
color: white;
}
.divTableRow:hover {
background-color: #005C8F;
}
.icon {
width: 30px;
padding-left: 10px;
padding-right: 10px;
}
.icon img {
width: 20px;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.userProfile {
height: 30px;
width: 30px;
border-radius: 50%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$('.menuLink, .icon')
.mouseover(function () {
$(".menuLink").stop(true, false).fadeIn(280);
$('.menuLink').stop(true, false).animate({
width: "300px",
opacity: "1",
"padding-left": "10px"
});
})
.mouseleave(function () {
$('.menuLink').stop(true, false).animate({
width: "0px",
opacity: "0",
"padding-left": "0px"
});
});
});
</script>
<div class="divTableRow">
<div class="menuLink">news feeds
</div>
<div class="icon">
<img src="img/signout.png" />
</div>
</div>
</div>
</div>
I like to create a counter on top of an icon which is similar to Facebook where you have a tiny red box to show how many friend requests but I do not know how should I begin. Am I right to said this can be done by tooltip?
I have a menu containing a newsfeed icon and I am using C# and HTML language. So I like to know how can I create the tiny box displaying the number of news system have.
Thank you,

How to create selectbox having check box

I am trying to implement a Selectbox which have some checkboxes in that selectbox like an image below. When i click on the select box it open the check box which exist in other div i have used z-index but its not working
it looks like this
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
This is CSS:-
<style>
.multiselect {
width: 200px;
height: 20px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate
{
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 34px;
width: 240px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
width: 268px;
}

#Sheraz, rather than modifying your code simply update with the following working code:
HTML
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
CSS
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
JS
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
http://codepen.io/elmahdim/pen/hlmri
Hope that helps, Good luck.

#Sheraj use this plugin from jquery..
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/