<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.multiselect {
width: 200px;
}
.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.show {
display: block;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
</head>
<body>
<div class="multiselect" >
<div class="selectBox" >
<select>
<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>
<script>
window.addEventListener("DOMContentLoaded", function() {
var clickHandler = "click";
if('ontouchstart' in document.documentElement){
clickHandler = "touchstart";
}
//когда страница загрузилась
var multiselect = document.querySelector(".multiselect"), //находим нужный блок
select = multiselect.querySelector(".selectBox"), //находим кнопку в этом блоке
checkboxes = multiselect.querySelector("#checkboxes");//находим блок которым управлет кнопка
select.addEventListener(clickHandler, function(event) { //на кнопку ставим обработчик клика
checkboxes.classList.toggle("show"); //меняем или ставим класс
checkboxes.classList.contains("show") ? window.addEventListener(clickHandler, hide) : window.removeEventListener(clickHandler, hide)
// если класс "show" поставлен ставим обработчик на весь документ иначе убираем (управлемый блок уже закрыт, повторно закрывать его не надо)
});
multiselect.addEventListener(clickHandler, function(event) {
event.stopPropagation() //отменяем всплытие клика иначе выбор любого чекбокса или клик по кнопке закроет управлемый блок, т.к. при открытии мы навесили обработчик закрытия
});
/* функция отмены класса с самоудалением */
function hide()
{
checkboxes.classList.remove("show"); //удалем класс
window.removeEventListener(clickHandler, hide) //удалем обработчик с документа
}
});
</script>
</body>
</html>
