0

Всем добрый день! Как создать выпадающий список-фильтр на 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>

2
  • 1
    Добавьте код, а мы посмотрим и поможем
    – Mihanik71
    20 июл 2016 в 16:55
  • @Mihanik71 , код добавил. Оформление, конечно, немного не то, но это я чуть позже поправлю, главное сам принцип работы
    – OstaninKI
    20 июл 2016 в 17:12

1 ответ 1

1

Добавил функцию добавления значения в список результатов и удаления результатов.

Будут вопросы или уточнения по заданию — пишите.

	function DropDown(el) {
	this.dd = el;
	this.placeholder = this.dd.children('span');
	this.opts = this.dd.find('ul.dropdown > li');
	this.result = $('.dropdown-result');
	this.resultClose = $('.dropdown-result .result-block .result-close');
	this.val = '';
	this.index = -1;
	this.initEvents();
	
}
DropDown.prototype = {
	initEvents : function() {
		var obj = this;
		obj.dd.data("value", {});
		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);
			
			var temp = obj.dd.data("value");
			temp[obj.val] = obj.val;
			obj.dd.data("value",temp);
			
			obj.result.html(obj.result.html()+"<div class='result-block' data-value='"+obj.val+"'>"+obj.val+"<div class='result-close'>x</div></div>");
			$('.result-close').on("click",function(){
				$(this).parent().remove();
				var temp = obj.dd.data("value");
				delete(temp[$(this).parent().data("value")]);
				obj.dd.data("value",temp);

			});
		});
		
		
	},
	getValue : function() {
		return  obj.dd.data("value");
	},
	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;
}

.dropdown-result{
	width:200px;
	background:#eee;
	margin:0 auto;
	color:#333;
	font-size:16px;
}
.dropdown-result .result-block{
	padding:10px 25px 10px 10px;
	margin:15px;
	border:1px solid #999;
	display:inline-block;
	position:relative;
}
.dropdown-result .result-block .result-close {
	color: #555;
	font-size: 17px;
	height: 17px;
	width: 17px;
	position: absolute;
	top: 10px;
	right: 0;
	cursor:pointer;
}
<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>
<div class="dropdown-result"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.