JavaScript: How to create dropdown buttons that could filter data?

Question

i am a front-end developer and really bad at coding JavaScript so, can anyone of you help me create two filter buttons which are dependent on each other? these buttons should also be able to filter data.

i've found a reference but it is in jquery. if you could help me convert it on javasript that would be really great. here it is [https://codepen.io/nrwilliams/pen/LNrgBy]

please help :"(( thank you!!!

Answer 1

Here is a version - you must click Filter button - I would personally just run the filter on change

I changed the selector and toggle logic from the original since it was not elegant

const typeFilter = document.querySelector(".filter-type");
const brandFilter = document.querySelector(".filter-brand");

document.querySelector(".sales-products-filter").addEventListener("change", (e) => {
  const tgt = e.target;
  if (!tgt.matches("select")) return; // not a select
  const show = typeFilter.value === "" && brandFilter.value === "";
  document.querySelectorAll(".filter").forEach(ele => ele.hidden = !show); // hide only if selections

});

document.querySelector(".filter-btn").addEventListener("click", function() {
  const type = typeFilter.value;
  const brand = brandFilter.value;
  document.querySelectorAll(".filter")
    .forEach(ele => ele.hidden = !(ele.classList.contains(brand) && ele.classList.contains(type)));

});

.sales-products-filter select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #4f4f55;
  background-image: none;
}


/* Custom Select */

.sales-products-filter .select {
  position: relative;
  display: block;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #4f4f55;
  overflow: hidden;
  border-radius: .25em;
}

.sales-products-filter select {
  width: 25%;
  height: 45px;
  margin: 20px 10px;
  padding: 0 0 0 1rem;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-size: .8rem;
  font-family: 'SofiaProLight';
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sales-products-filter select::-ms-expand {
  display: none;
}


/* Arrow */

.sales-products-filter .select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;
  background: #34495e;
  pointer-events: none;
}


/* Transition */

.sales-products-filter .select:hover::after {
  color: #f39c12;
}

.sales-products-filter .select::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

.sales-products-filter .filter-btn {
  background: none;
  border: 1px solid #4f4f55;
  color: #4f4f55;
  font-family: 'SofiaProLight';
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  padding: 16px 20px;
  display: inline-block;
  margin-left: 20px;
}

.sales-products-filter {
  display: block;
  margin: 0 auto;
  text-align: center;
}

<div class="sales-products-filter">

  <!-- BRAND FILTER -->
  <select class="filter-brand">
    <option value="" selected>Select Brand</option>
    <option value="auto">AutoSticks</option>
    <option value="ss">ScentSicles</option>
    <option value="everyday">Everyday</option>
  </select>

  <!-- TYPE FILTER -->
  <select class="filter-type">
    <option value="" selected>Item Type</option>
    <option value="display">Display</option>
    <option value="single">Single Item</option>
  </select>

  <button class="filter-btn">Filter</button>

</div>

<div class="filter auto single">Auto Single</div>
<div class="filter auto display">Auto Display</div>
<div class="filter ss display">SS Display</div>
<div class="filter ss single">SS Single</div>

<div class="filter everyday single">ED Single</div>
<div class="filter everyday display">ED Display</div>