使用纯javascript使用两个select元素筛选元素

我正在努力用两个选定的元素对我的正方形和圆形进行排序

每个select元素单独工作，但不能一起工作。 谁能告诉我怎样才能使它正常工作

请帮忙

函数colorType（）{
var colorBox=document.querySelector（“#selectColor”）；
var-boxValue=colorBox.options[colorBox.selectedIndex].value；
var blue=document.queryselectoral（'.card.blue'）；
var red=document.queryselectoral（'.card.red'）；
如果（boxValue==“蓝色”）{
对于（变量i=0；i

.card{
宽度：100px；
高度：100px；
浮动：左；
利润率：20px；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：红色；
}
.轮{
边界半径：50%；
}
.隐藏{
显示：无；
}

选择颜色
蓝色
红色
选择形状
圆形的
广场

您可以执行以下操作，选择卡片，将

HTMLCollection

转到Array并使用

过滤器。
display
函数是非常无用的，但是我让它运行了，所以我不必更改HTML

编辑：详细说明
您需要获得所有卡片。

为此，最好使用
getElementdByClassName
，因为它返回一个。

另一方面，
querySelectorAll
返回一个值。
HTMLCollection
是实时集合，而
NodeList
并不总是这样

HTMLDOM中的HTMLCollection是活动的；它会自动更新
当基础文档发生更改时

因此，一旦您在变量中获得卡，如果您添加或删除卡，您不需要更新变量值，它将自动完成

选择输入时触发您的功能
你已经做到了，这只是事件。

获取形状和颜色值
只需使用
文档检索
select
s项。getElementById
（比t
querySelector
快），然后
value
属性为您提供
select
标记内所选
选项的值

显示所有卡片并隐藏正确的卡片
由于
cards
是一个HTMLCollection，您不能在其上使用方法，因此您需要使用
array.from
将其转换为一个数组。
然后可以使用并删除“隐藏”类

要添加、删除或检查类的存在性，我们使用属性。
要从（卡片）
中筛选
数组，请使用该方法，然后可以将“隐藏”类添加到所需卡片








var cards=document.getElementsByClassName（'card'）；
var colorSelect=document.getElementById（'selectColor'）；
var shapeSelect=document.getElementById（'selectShape'）；
函数colorType（）{
显示（colorSelect.value、shapeSelect.value）；
}
函数shapeType（）{
显示（colorSelect.value、shapeSelect.value）；
}
功能显示（颜色、形状）{
Array.from（cards.forEach（card=>card.classList.remove（'hidden'））；
如果（颜色）{
数组。从（卡片）
.filter（card=>！card.classList.contains（颜色））
.forEach（card=>card.classList.add（'hidden'））
}
如果（形状）{
数组。从（卡片）
.filter（card=>！card.classList.contains（shape））
.forEach（card=>card.classList.add（'hidden'））
}
}
.card{
宽度：100px；
高度：100px；
浮动：左；
利润率：20px；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：红色；
}
.轮{
边界半径：50%；
}
.隐藏{
显示：无；
}
选择颜色
蓝色
红色
选择形状
圆形的
广场
您可以执行以下操作，选择卡片，将
HTMLCollection
转到Array并使用
过滤器。
display
函数是非常无用的，但是我让它运行了，所以我不必更改HTML

编辑：详细说明
您需要获得所有卡片。

为此，最好使用
getElementdByClassName
，因为它返回一个。

另一方面，
querySelectorAll
返回一个值。
HTMLCollection
是实时集合，而
NodeList
并不总是这样

HTMLDOM中的HTMLCollection是活动的；它会自动更新
当基础文档发生更改时

因此，一旦您在变量中获得卡，如果您添加或删除卡，您不需要更新变量值，它将自动完成

选择输入时触发您的功能
你已经做到了，这只是事件。

获取形状和颜色值
只需检索您的
选择