Drop down filter

user_16412892 0
Viewed 185

I have created a filter functionality, which has two dropdowns, on the basis of selection of these dropdowns select it shows the results.

But I want to modify it a little - what I am trying to achieve is: on select of single dropdown it should also show the result, which is currently not showing

Please help me modify this code

$('#city, #state').on('change', function() {
  // set reference to select elements
  var city = $('#city');
  var state = $('#state');

  // check if user has made a selection on both dropdowns
  if (city.prop('selectedIndex') > 0 && state.prop('selectedIndex') > 0) {
    // remove active class from current active div element
    $('.result.active').removeClass('active');

    // get all result divs, and filter for matching data attributes
    $('.result').filter('[data-city="' + city.val() + '"][data-state="' + state.val() + '"]').addClass('active');

  }
});
.result {
  display: none;
}

.result.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- partial:index.partial.html -->

<select id="city">
  <option value="select">CITY</option>
  <option value="beaches">Noida</option>
  <option value="museums">Mahrastra</option>
  <option value="mountains">Delhi</option>
</select>
<select id="state">
  <option value="select">STATE</option>
  <option value="chill">UP</option>
  <option value="fast-paced">Mahrastra</option>
  <option value="both">Delhi</option>
</select>


<div class="result" data-city="beaches" data-state="chill" data-pincode="glenchill">glen gallery one</div>
<div class="result" data-city="beaches">no gallery</div>
<div class="result" data-city="beaches" data-state="fast-paced" data-pincode="glenfast-paced">glen gallery two</div>
<div class="result" data-city="beaches" data-state="both" data-pincode="glenboth">glen gallery two</div>
<div class="result" data-city="beaches" data-state="glenchill">beaches and chill glenn</div>
<div class="result" data-city="beaches" data-state="glenfast-paced">beaches and fast-paced glenn</div>
<div class="result" data-city="beaches" data-state="glenboth">beaches and both glenn</div>
<div class="result" data-city="museums" data-state="chill">museums and chill</div>
<div class="result" data-city="museums" data-state="fast-paced">museums and fast-paced</div>
<div class="result" data-city="museums" data-state="both">museums and both</div>
<div class="result" data-city="mountains" data-state="chill">mountains and chill</div>
<div class="result" data-city="mountains" data-state="fast-paced">mountains and fast-paced</div>
<div class="result" data-city="mountains" data-state="both">mountains and both</div>

jquery javascript
1 Answers

Some logical coorrections will help you to achieve this.

Logic

  • Set al class active initially
  • Remove the active class from each nodes comparing their data-city and data-state values

$('#city, #state').on('change', function () {
  // set reference to select elements
  var city = $('#city');
  var state = $('#state');
  $('.result').addClass('active');
  if (city.prop('selectedIndex') > 0) {
    // get all result divs, and filter for matching data attributes
    $('.result').filter('[data-city!="' + city.val() + '"]').removeClass('active');
  }
  if (state.prop('selectedIndex') > 0) {
    // get all result divs, and filter for matching data attributes
    $('.result').filter('[data-state!="' + state.val() + '"]').removeClass('active');
  }
});
.result {
  display: none;
}

.result.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="city">
  <option value="select">CITY</option>
  <option value="beaches">Noida</option>
  <option value="museums">Mahrastra</option>
  <option value="mountains">Delhi</option>
</select>
<select id="state">
  <option value="select">STATE</option>
  <option value="chill">UP</option>
  <option value="fast-paced">Mahrastra</option>
  <option value="both">Delhi</option>
</select>


<div class="result" data-city="beaches" data-state="chill" data-pincode="glenchill">glen gallery one</div>
<div class="result" data-city="beaches">no gallery</div>
<div class="result" data-city="beaches" data-state="fast-paced" data-pincode="glenfast-paced">glen gallery two</div>
<div class="result" data-city="beaches" data-state="both" data-pincode="glenboth">glen gallery two</div>
<div class="result" data-city="beaches" data-state="glenchill">beaches and chill glenn</div>
<div class="result" data-city="beaches" data-state="glenfast-paced">beaches and fast-paced glenn</div>
<div class="result" data-city="beaches" data-state="glenboth">beaches and both glenn</div>
<div class="result" data-city="museums" data-state="chill">museums and chill</div>
<div class="result" data-city="museums" data-state="fast-paced">museums and fast-paced</div>
<div class="result" data-city="museums" data-state="both">museums and both</div>
<div class="result" data-city="mountains" data-state="chill">mountains and chill</div>
<div class="result" data-city="mountains" data-state="fast-paced">mountains and fast-paced</div>
<div class="result" data-city="mountains" data-state="both">mountains and both</div>

user_60993270
Related