选择Javascript过滤器而不是复选框

我目前正在做一个简单的项目，需要过滤多个选项。我在网上偶然发现了一个使用复选框的解决方案，但我需要使用选择下拉列表而不是复选框

原始解决方案可在此处找到：

它使用复选框

<input class="brand" type="checkbox" value="AsiaPacific">Asia Pacific
<input class="brand" type="checkbox" value="Australia">Australia

<input class="class" type="checkbox" value="Compact">Compact<br>
<input class="class" type="checkbox" value="Limousine">Limousine<br>
<input class="class" type="checkbox" value="SUV">SUV<br>
<input class="class" type="checkbox" value="Sport">Sport<br>

我已将其修改为以下内容：

var getFilter = function(category) {
    var filter = $("#filters ." + category + "option:selected").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters select").on('change', function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

---

这是一个有点简单，但它不工作。我假设问题出在getFilter映射函数上，但我似乎不知道下一步该怎么办。

您需要给您的选择子选择器选项$filters留出一个空间。+类别+选项：选中，并在“选择元素”中使用“多个”来选择多个值。请尝试以下代码片段以供参考

var getFilter=functioncategory{ var filter=$filters.+category+选项：selected.mapfunction{ 返回'[data filter*='+this.value+']'； }.得到.加入，； 过滤器=过滤器。长度>0？过滤器：*； 回流过滤器； } $filters select.在“更改”功能上{ var all=$.filterme； var tgts=all.filtergetFilterbrand.filtergetFilterclass.filtergetFiltercolor； all.nottgts.hide； tgts.show； }; 查找正确的型号：选中一个或多个复选框以筛选您的选择：

亚太地区 澳大利亚 契约 豪华轿车 运动型多用途汽车 运动 银 蓝色 红色 白色 亚洲太平洋A1亚洲太平洋，紧凑型，银色，蓝色，红色 澳大利亚118i澳大利亚紧凑型红白 亚洲A4亚洲豪华轿车运动银蓝红 澳大利亚X3澳大利亚SUV运动白兰银牌 亚洲太平洋R8亚洲太平洋运动银牌 澳大利亚概念X澳大利亚运动白色银蓝色

---

不要只是张贴代码。解释他们做错了什么，以及你是如何修复的。非常感谢！我错过了间距，但感谢您通知我添加多属性。

var getFilter = function(category) {
    var filter = $("#filters ." + category + ":checked").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters :checkbox").click(function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

var getFilter = function(category) {
    var filter = $("#filters ." + category + "option:selected").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters select").on('change', function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});