jQuery выпадающий связанный фильтр

Question

поэтому я искал и нашел тему, которая имеет именно то, что я ищу; jquery multiple dropdown filter menu

Проблема в том, что разрешение не работает для меня. Мое понимание jQuery не так жарко, как хотелось бы, и поэтому я немного путаюсь в этом без особого успеха. По сути, я хочу добиться двухступенчатого фильтра; в первом выпадающем списке отображаются доступные трубки, во втором выпадающем списке отображаются принадлежности, связанные с каждой телефонной трубкой.

Функциональность предназначена для отображения каждой «строки» для пользователя, который выбирает либо первый выпадающий список (поэтому, если пользователь выбрал «iPhone», отобразятся все строки, содержащие класс «iPhone»), второе выпадающее меню отображение в зависимости от выбранных параметров (так, пользователь выбирает «Случай», будет отображаться весь контент с классом «case»). Теперь заключительная часть получает оба выпадающего списка для работы вместе, чтобы убедиться, что если пользователь выбирает «iPhone», а затем «Случай» ТОЛЬКО, то div с именами классов «iPhone Case» (разделенные для определения отдельных классов) показать.

Вот мой 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(); 
}); 

Пожалуйста, посмотрите на this fiddle и дайте мне знать, где я буду неправильно!

Спасибо!

Answer 1

Я обновил скрипку here.
Вы забыли добавить jquery для скрипки. Он находится слева вверху в разделе «Рамки и расширения».

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); 
}); 

Я удалил класс all от дивы.
Если вам нужны все iphone divs для видимости просто позвоните div.iphone.
Если вам нужен конкретный div от iphone, ваш более ранний метод был в порядке (div.iphone.case).