Всем добрый день! Как создать выпадающий список-фильтр на html+css+js. Поведение должно быть как на картинке: при нажатии на "крестик" у заданного "фильтра" значение надо сбросить в дефолтное. Стандартные кастомизации элемента select вряд-ли помогут, поэтому начал оформлять просто на div'ах
Сейчас код написан как из примера на странице: http://www.rudebox.org.ua/custom-drop-down-list-styling/
Можете ли подсказать как правильно написать js код для очистки результатов и добавления закрывающего "крестика"
Пример кода:
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text('' + obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});
});
.wrapper-dropdown-1 {
position: relative;
width: 100px;
padding: 10px;
margin: 0 auto;
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;
font-weight: bold;
}
.wrapper-dropdown-1 .dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
list-style: none;
font-weight: normal;
opacity: 0;
pointer-events: none;
text-align: center;
}
.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}
.wrapper-dropdown-1.active {
background: #9bc7de;
background: -moz-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
background: -o-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
background: -ms-linear-gradient(left, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
background: linear-gradient(to right, #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );
}
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}
.wrapper-dropdown-1.active::after {
border-color: #9bc7de transparent;
border-width: 6px 6px 0 6px;
margin-top: -3px;
}
.wrapper-dropdown-1::after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown-1" tabindex="1">
<span>Month:</span>
<ul class="dropdown" tabindex="1">
<li><a href="#">Jun</a></li>
<li><a href="#">Feb</a></li>
<li><a href="#">Mar</a></li>
<li><a href="#">Apr</a></li>
<li><a href="#">...</a></li>
</ul>
</div>