Good day everyone! How to create dropdown list filter on html + css + js. The behavior should be as in the picture: when you click on the "cross" of the specified "filter" value must be reset to default. Standard customization of the select element is unlikely to help, so I started making out simply on divs

enter image description here

Now the code is written as from the example on the page: http://www.rudebox.org.ua/custom-drop-down-list-styling/

Can you tell me how to write js code correctly to clean up the results and add a closing cross?

Code example:

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>

  • one
    Add the code, and we will see and help - Mihanik71
  • @ Mihanik71, code added. The design, of course, is a little bit wrong, but I will correct it a little later, the main principle of operation itself is OstaninKI

1 answer 1

Added a function to add a value to the list of results and delete the results.

There will be questions or clarifications on the task - write.

  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>