Question

所以我搜索并找到了一个主题，正是我正在寻找的东西; 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® B15Q</option> <option value="CatB100">Cat® B100</option> <option value="CatB25">Cat® B25</option> <option value="CatS50">Cat® 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);
});

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

jQuery下拉链接过滤器

1 个答案: