jQuery Sorting results of dropdown and checkbox filters

Question

I have a list of items that are supposed to be sorted by tag and by country. I have a list of checkboxes for the tags and a form with a dropdown for the country.

So far they both work properly, however I can't figure out how to let them both work together. When a country is selected only the items with the country and the checkbox tags chosen should be shown.

Here's what I have so far: - fiddle

$(".filter-options :checkbox").click(function() 
    {
        $(".card-col .card-col-item").hide();
        $(".filter-options :checkbox:checked").each(function() 
        {
           $("." + $(this).val()).fadeIn();
        });
       
        if($('.filter-options :checkbox').filter(':checked').length < 1) 
        {
             $(".card-col .card-col-item").fadeIn();
        }
});


$( ".event-type-select" ).change(function() {
  var selectedEventType = this.options[this.selectedIndex].value;
  if (selectedEventType == "all") {
    $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
      } else {
        $(".filter-options :checkbox").removeAttr("checked");
        $(".card-col .card-col-item").hide(function(){$(this).removeClass( "country" );});
        $('.card-col .card-col-item[data-eventtype="' + selectedEventType + '"]').show(function(){$(this).addClass( "country" );});
  }
});
     

$(".reset-filter").click(function() 
    {
    $(".filter-options :checkbox").removeAttr("checked");
            $(".card-col .card-col-item").show(function(){$(this).removeClass( "country" );});
    });

The HTML:


<div class="filter-wrapper">
        <h3>Filter Items</h3>
        <button class="reset-filter">
          reset
        </button>
          <ul class="filter-options">
             
            <li class="filter-list"><div><input type="checkbox" value="tag1" data-filter_id="tag1"> Our Solutions</div></li>
            
            <li class="filter-list"><div><input type="checkbox" value="tag2" data-filter_id="tag2"> Service categories</div></li>
            
          </ul>

        <div>
          Country / Region
        </div>

        <form class="filter-dropdown">
          <select class="event-type-select">
            
            <option value="all">All</option>
            
            <option value="belgium">Belgium</option>
            
            <option value="united kingdom">United Kingdom</option>
            
          </select>
         </form>
      </div>

<div class="card-wrapper">
        <div class="card-col">
        

        <div class="card-col-item item-border 
                     tag1
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>
        
 <div class="card-col-item item-border 
                     tag2
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>

 <div class="card-col-item item-border 
                     tag3
                " data-eventtype="belgium">
          <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">
            
          </div>
          <div class="card-inner-col ">
            <div class="card-tags">
                
              
                     our solutions
                
            </div>
            <div class="card-item-title">
              <h4 class="PrimaryDarkBlue">
                Lorem Ipsum Dolor
              </h4>
              
            </div>
          </div>
        </div>

  </div>
</div>

charlietfl · Accepted Answer · 2020-12-12 14:49:59Z

Combine these into one change event handler.

For the tags I make an array of the checked checkbox values and Array#some() for a variable tagsMatch and another variable for countryMatch inside a jQuery filter() and return an expression that both are true

const $checks = $(".filter-options :checkbox"),
$sel = $('.event-type-select'),
$items = $('.card-col-item')


$checks.add($sel).change(function(){
    const tagsArr = $checks.filter(':checked').map((i, el)=> el.value).get(),
          country = $sel.val();
    // hide all items then filter the ones to show
    $items.hide().filter(function(){
         const $item = $(this),
                eType = $item.data('eventtype'),
                tagsMatch = !tagsArr.length  || tagsArr.some(tag => $item.hasClass(tag)),
                countryMatch = country === 'all' || country === eType;
         
         return tagsMatch && countryMatch;
    }).show()

})

.card-item-img{height:40px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-wrapper">
  <h3>Filter Items</h3>
  <button class="reset-filter">
          reset
        </button>
  <ul class="filter-options">

    <li class="filter-list">
      <div><input type="checkbox" value="tag1" data-filter_id="tag1"> Our Solutions</div>
    </li>

    <li class="filter-list">
      <div><input type="checkbox" value="tag2" data-filter_id="tag2"> Service categories</div>
    </li>

  </ul>

  <div>
    Country / Region
  </div>
  <form class="filter-dropdown">
    <select class="event-type-select">

      <option value="all">All</option>

      <option value="belgium">Belgium</option>

      <option value="united kingdom">United Kingdom</option>

    </select>
  </form>
</div>

<div class="card-wrapper">
  <div class="card-col">


    <div class="card-col-item item-border 
                     tag1
                " data-eventtype="belgium">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          our solutions

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>
    </div>


    <div class="card-col-item item-border 
                     tag2
                " data-eventtype="united kingdom">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          Imagery Services Service categories

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>
    </div>


    <div class="card-col-item item-border tag3 " data-eventtype="belgium">
      <div class="card-item-img " style="background-image:url('https://f.hubspotusercontent20.net/hubfs/7788778/Card%20Images/pexels-photo-209251.jpeg');">

      </div>
      <div class="card-inner-col ">
        <div class="card-tags">


          Service categories

        </div>
        <div class="card-item-title">
          <h4 class="PrimaryDarkBlue">
            Lorem Ipsum Dolor
          </h4>

        </div>
      </div>

    </div>


  </div>

Thank you so much that worked perfectly! I'll need to brush up on my js skills :-) I usually don't have to make filters like these. Thank you for the explanation!

Collectives™ on Stack Overflow

jQuery Sorting results of dropdown and checkbox filters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related