jQuery dropdown linked filter

Question

so I've searched and found a topic that has exactly what I'm looking for; jquery multiple dropdown filter menu

The problem is that the resolution isn't working for me. My understanding of jQuery isn't as hot as I'd like and so I'm kind of muddling through this without much success. Essentially what I'm looking to achieve is a two step filter; the first dropdown will display the handsets available, the second dropdown will display the accessories associated with each handset.

The functionality is intended to display each "row" on a user selecting, either, the first dropdown (so, if a user selected "iPhone" all rows containing the class "iPhone" would display), the second dropdown would display depending on the options selected (so, a user selects "Case"; all content with the class "case" will display). Now the final part is getting both dropdowns to work together to ensure that if a user selects "iPhone" and then "Case" ONLY the divs with the class names of "iPhone Case" (separated to determine individual classes) would show.

Here's my HTML:

 <select class="dropdown">
 <option value="all">Show All</option>
<option value="iPhone">iPhone</option>
<option value="Samsung">Samsung</option>
<option value="iPad">iPad</option>
<option value="CatB15Q">Cat&reg; B15Q</option>
<option value="CatB100">Cat&reg; B100</option>
<option value="CatB25">Cat&reg; B25</option>
<option value="CatS50">Cat&reg; S50</option>
</select>

    <select class="dropdown">
             <option value="all">Show All</option>
<option value="case">Case</option>
<option value="charger">Charger</option>
<option value="holder">Holder</option>
<option value="other">Other</option>

</select>

<hr class="featurette-divider">
<div class="results">(all) results</div>
  <div class="row featurette all iphone case">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="http://cat2staging.vividlimecreative.com/media/images/additional_imagery/homepage-2nd-CTA-box-iphone4-urban-case.png" data-holder-rendered="true">
    </div>
    <div class="col-md-7">
      <h2>Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="item-text">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      <p class="mobile-button"><a class="btn btn-default" href="#" role="button">View <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></p>
    </div>
  </div>


  <div class="row featurette all iphone case">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="http://cat2staging.vividlimecreative.com/media/images/additional_imagery/homepage-2nd-CTA-box-iphone4-urban-case.png" data-holder-rendered="true">
    </div>
    <div class="col-md-7">
      <h2>Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="item-text">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      <p class="mobile-button"><a class="btn btn-default" href="#" role="button">View <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></p>
    </div>
  </div>


  <div class="row featurette all iphone case">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="http://cat2staging.vividlimecreative.com/media/images/additional_imagery/homepage-2nd-CTA-box-iphone4-urban-case.png" data-holder-rendered="true">
    </div>
    <div class="col-md-7">
      <h2>Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="item-text">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      <p class="mobile-button"><a class="btn btn-default" href="#" role="button">View <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></p>
    </div>
  </div>


  <div class="row featurette all iphone case">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="http://cat2staging.vividlimecreative.com/media/images/additional_imagery/homepage-2nd-CTA-box-iphone4-urban-case.png" data-holder-rendered="true">
        </div>
    <div class="col-md-7">
      <h2>Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="item-text">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      <p class="mobile-button"><a class="btn btn-default" href="#" role="button">View <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></p>
    </div>
  </div>


  <div class="row featurette all iphone case">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="http://cat2staging.vividlimecreative.com/media/images/additional_imagery/homepage-2nd-CTA-box-iphone4-urban-case.png" data-holder-rendered="true">
    </div>
    <div class="col-md-7">
      <h2>Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="item-text">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      <p class="mobile-button"><a class="btn btn-default" href="#" role="button">View <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></p>
    </div>
  </div>
  </div>

jQuery:

$("select.dropdown").change(function(){
var filters = $.map($("select.dropdown").toArray(), function(e){
    return $(e).val();
}).join(".");
$("div#FilterContainer").find("div").hide();
$("div#FilterContainer").find("div." + filters).show();
});

Please have a look at this fiddle and do let me know where I'm going wrong!

Thanks!

Rohith · Accepted Answer · 2014-12-09T12:02:50.907

I have updated the fiddle here.
You forgot to add jquery to fiddle. It is there on the left top under Frameworks and Extensions.

jQuery

$("select.dropdown").change(function(){
    var filters = $.map($("select.dropdown").toArray(), function(e){
        return $(e).val();
    });
    var filter;
    if(filters[0]=="all")
    {
        if(filters[1]=="all")
           filter = ""; // Show all phones and accessories
        else
           filter = "." + filters[1]; // Show all phones and selected accessory
    }
    else{
        if(filters[1]=="all")
           filter = "." + filters[0];// Show selected phones and its accessories
        else
           filter = "." + filters.join(".");// Show selected accessory of the selected phone
    }
    $("div#FilterContainer > div").hide(); // hide all divs
    $("div#FilterContainer").find("div" + filter).show(); 
    //console.log(filters);
});

I removed the class all from divs.
If you need all iphone divs to be visible just call div.iphone.
If you need a specific div from iphone, your earlier method was okay (div.iphone.case).

That's perfect! Thanks for your help on this. I can't tell you how frustrated I was beginning to get with this! Thank you very, very much — Achello, Dec 09 '14 at 14:30
Is there a way to hide all content for users when they land on the page? Only to display results when users select the dropdown options? — Achello, Dec 09 '14 at 16:59
You can call `$("div#FilterContainer > div").hide();` on document.ready function to hide all on page load. — Rohith, Dec 10 '14 at 05:41

jQuery dropdown linked filter

1 Answers1