Javascript 如何根据选择进行筛选？

请告诉我如何过滤并只保留区块3中与第一和第二区块中的选项相对应的卡片。（第一块和第二块相互独立，第三块中的结果取决于前两块中的选择）

默认情况下，将选择第一个项目。如果第三个区块中有4张以上的卡片，则显示前4张，隐藏其余的

const step1_items=document.querySelector（'.step-1'）。queryselectoral（'.item'）；
const step2_items=document.querySelector（'.step-2'）。queryselectoral（'.item'）；
const stepCards=document.querySelector（'.step-3'）.queryselectoral（'.card'）；
步骤1_items.forEach（功能（项目）{
item.addEventListener（'单击'，函数（））{
步骤1_items.forEach（功能（项目）{
item.classList.remove（'item_active'）；
});
this.classList.add（'item_active'）；
});
})
步骤2_items.forEach（功能（项目）{
item.addEventListener（'单击'，函数（））{
步骤2_items.forEach（功能（项目）{
item.classList.remove（'item_active'）；
});
this.classList.add（'item_active'）；
});
})
stepCards.forEach（功能（项目）{
item.style.display='block'
});
.wrapper{
显示器：flex；
柔性包装：包装；
调整项目：灵活启动；
}
.第1步，
.步骤2{
边框：1px实心#009ce1；
填充：15px；
显示：内联块；
右边距：15px；
}
.签名{
显示：块；
边缘底部：15px；
颜色：5b6d89；
宽度：100%；
}
.项目{
左侧填充：30px；
列表样式：无；
字体大小：20px；
线高：30px；
光标：指针；
颜色：#008ed1；
过渡：均为0.3秒；
位置：相对位置；
高度：自动；
}
.项目：：之前{
内容：''；
宽度：12px；
高度：12px；
边界半径：100%；
边框：1px实心#008ed1；
位置：绝对位置；
左：0；
最高：50%；
转化：translateY（-50%）；
}
.item_活动：：之前{
背景色：#008ed1；
}
.项目：悬停{
颜色：#ccc；
}
.步骤3{
边框：1px实心#009ce1；
填充：15px；
显示：内联flex；
柔性包装：包装；
证明内容：之间的空间；
}
.卡片{
宽度：150px；
边缘底部：15px；
填充：10px；
列表样式：无；
文本对齐：居中；
字体大小：20px；
线高：30px；
颜色：#008ed1；
边框：1px实心#008ed1；
}
.card\u更多{
边缘顶部：10px；
显示：块；
文字装饰：无；
颜色：#ee8853；
边框：1px实心#ee8853；
}


流媒体服务
Netflix公司
HBO最大值
Hulu


电影类型
喜剧
行动
恐怖
戏剧
幻想


选择

Netflix喜剧1


Netflix喜剧2


Netflix喜剧3


Netflix喜剧4


Netflix actions 1


Netflix actions 2


Netflix actions 3


Netflix恐怖1


Netflix恐怖2


Netflix恐怖3


Netflix恐怖4


Netflix戏剧1


Netflix戏剧2


Netflix幻想1


Netflix幻想2


Netflix幻想3


Netflix幻想4


Netflix幻想5


HBO Max喜剧1


HBO Max喜剧2


HBO Max喜剧3


HBO最大行动1


HBO最大行动2


HBO最大行动3


HBO最大行动4


HBO最大恐怖1


HBO最大恐怖2


HBO最大恐怖3


HBO最大恐怖4


HBO Max戏剧1


HBO Max戏剧2


HBO Max戏剧3


HBO Max戏剧4


HBO最大幻想1


HBO最大幻想2


HBO最大幻想3


HBO最大幻想4


HBO最大幻想5


葫芦喜剧1


葫芦喜剧2


葫芦行动1


葫芦行动2


葫芦行动3


葫芦行动4


葫芦行动5


葫芦行动6


Hulu恐怖1


Hulu恐怖2


Hulu恐怖3


葫芦剧1


胡鲁d