JQuery раскрывающийся связанный фильтр

Question

Поэтому я искал и нашел тему, которая имеет именно то, что я ищу; JQuery несколько раскрывающихся меню фильтра

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

Функциональность предназначена для отображения каждой "строки" при выборе пользователем первого раскрывающегося списка (поэтому, если пользователь выбрал "iPhone", будут отображаться все строки, содержащие класс "iPhone"), второе раскрывающееся меню будет отображаться в зависимости от выбранные параметры (таким образом, пользователь выбирает "Case"; будет отображаться весь контент с классом "case"). Теперь последняя часть заставляет оба раскрывающихся списка работать вместе, чтобы гарантировать, что если пользователь выберет "iPhone", а затем "Case", ТОЛЬКО будут показаны 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();
});

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

Спасибо!

Answer 1

Я обновил скрипку здесь.
Вы забыли добавить 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 div, чтобы быть видимым просто позвоните div.iphone,
Если вам нужен конкретный div от iphone, ваш предыдущий метод был в порядке (div.iphone.case).