Javascript 如何在html中使用带引导4的2个下拉过滤器

我在一个有“项目”页面的网站上工作。在这个页面上，他们显示了他们所有完成的项目，以显示给他们的客户。现在，他们需要两个过滤器。1表示“服务类型”，1表示“结构类型”。 我想把它放在一个下拉列表中，但它似乎只适用于“元素”，而不适用于我现在正在使用的“数据列表”。但“数据列表”属性的问题在于它只适用于1个过滤器

我想不出我该怎么做。。。但一定有办法，对吗

提前谢谢！

---

Grts

此方法将类名与两个选择框中的数据列表属性中的值相匹配。这里使用的逻辑运算符将帮助您在独占或包含条件之间进行选择

$（文档）.ready（函数（）{
$（'select'）。在（'change'，function（）上{
var struct=$（'.structure'）.find（':selected'）.attr（'data-list'）；
var serv=$（'.service'）.find（':selected'）.attr（'data-list'）；
$（'.project'）。每个（函数（）{
var classList=$（this.attr（'class'）.split（/\s+/）；
//log（类列表）；
if（struct==='all'&&serv=='all'）{
$（'.project'）.show（）；
}else if（struct=='all'| | serv==='all'）{
$（this）.toggle（（classList.includes（struct）| | classList.includes（serv））；
}否则{
$（this）.toggle（（classList.includes（struct）和&classList.includes（serv））；
}
});
});
});
img{
宽度：150px；
高度：150像素；
}

--按结构过滤--
旅馆
房屋
办公室
剧院
--按服务筛选--
德科
设计
建设
照明
你能用你的代码创建一个JSFIDLE吗？我们需要你的代码更加清晰。。。您是否使用了我们需要考虑的插件，或者您正在寻找一个使用数据属性进行多重过滤的jQuery解决方案？这就是我所期待的，非常感谢！您可以将其设置为接受答案：）不客气！