jQuery下拉链接过滤器

时间：2014-12-09 11:08:43

标签： jquery dropdownbox

所以我搜索并找到了一个主题，正是我正在寻找的东西; jquery multiple dropdown filter menu

问题是该决议对我不起作用。我对jQuery的理解并不像我想的那么热，所以我对此并没有太大的成功感到困惑。基本上我想要实现的是一个两步过滤器;第一个下拉列表将显示可用的手机，第二个下拉列表将显示与每个手机相关的附件。

该功能旨在显示用户选择的第一个下拉列表中的每个“行”（因此，如果用户选择“iPhone”所有包含“iPhone”类的行将显示），则显示第二个下拉列表取决于所选的选项（因此，用户选择“案例”;将显示具有“案例”类的所有内容）。现在最后一部分是让两个下拉列表一起工作以确保如果用户选择“iPhone”然后“Case” ONLY 具有类名为“iPhone”的div案例“（分开以确定个别类别）将显示。

这是我的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并告诉我出错的地方！

谢谢！

1 个答案:

答案 0 :(得分：0)

我更新了小提琴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);
});

我从div中删除了班级all 如果您需要显示所有iphone div，请致电div.iphone 如果您需要来自iphone的特定div，您的早期方法就可以了（div.iphone.case）。

相关问题
最新问题