jQuery下拉链接过滤器

因此，我搜索并找到了一个主题，它正是我想要的

问题是这个决议对我不起作用。我对jQuery的理解并没有我想的那么热烈，因此我在这方面有些勉强，但没有取得多少成功。本质上，我希望实现的是一个两步过滤器；第一个下拉列表将显示可用的手机，第二个下拉列表将显示与每个手机相关的附件

该功能旨在显示用户选择第一个下拉列表中的每一行，因此，如果用户选择iPhone，则包含类别iPhone的所有行都将显示，第二个下拉列表将根据所选选项显示，因此，用户选择大小写；将显示包含类案例的所有内容。现在，最后一部分是让这两个下拉列表一起工作，以确保如果用户选择iPhone，然后选择大小写，则仅显示带有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>

请看一下，一定要告诉我哪里出了问题

谢谢

我已经更新了小提琴。 您忘了将jquery添加到fiddle。它位于左上方的框架和扩展下

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中删除了。 如果您需要所有iphone div都可见，只需调用div.iphone即可。

---

如果您需要iphone中的特定div，您以前的方法是ok div.iphone.case。

太好了！谢谢你在这方面的帮助。我不能告诉你我开始对这件事感到多么沮丧！非常非常感谢有没有一种方法可以在用户登陆页面时隐藏所有内容？仅在用户选择下拉选项时显示结果？您可以调用$divFilterContainer>div.hide；on document.ready函数隐藏页面加载时的所有内容。

$("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();
});

$("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);
});