Javascript 如何使用两个不同的下拉列表对两个不同的数据属性进行排序？

我有一个自定义的下拉过滤器（不是选择>选项过滤器），我正在尝试按两个不同的数据属性进行排序。我能够按故事类型进行排序，但我似乎无法使年度正常工作

此外，我似乎无法让复位按钮工作

//下拉列表
for（document.querySelectorAll（“.custom\uu select-wrapper”）的常量下拉列表）{
addEventListener（“单击”），函数（）{
这个.querySelector（“.custom_uuselect”）.classList.toggle（“open”）；
});
}
for（document.querySelectorAll的const选项（“.custom\u选项”））{
option.addEventListener（“单击”），函数（）{
如果（！this.classList.contains（“selected”））{
这是parentNode
.querySelector（“.custom\u option.selected”）
.classList.remove（“选定”）；
此.classList.add（“选定”）；
此.closest（“.custom\u select”）.querySelector(
“.custom_uuuSelect-trigger span”
).textContent=此.textContent；
storyFilter（this.dataset[“value”]）；
}
});
}
for（document.querySelectorAll的const选项（“.custom\u选项”））{
option.addEventListener（“单击”），函数（）{
如果（！this.classList.contains（“selected”））{
这是parentNode
.querySelector（“.custom\u option.selected”）
.classList.remove（“选定”）；
此.classList.add（“选定”）；
此.closest（“.custom\u select”）.querySelector(
“.custom_uuuSelect-trigger span”
).textContent=此.textContent；
yearFilter（this.dataset[“year”]）；
}
});
}
window.addEventListener（“单击”，函数（e）{
for（const select of document.querySelectorAll（“.custom\u select”））{
如果（！select.contains（如目标））{
选择.classList.remove（“打开”）；
}
}
});
//滤器
函数storyFilter（类名）{
const list=document.queryselectoral（“.list.article”）；
for（列表中的常数项）{
article.classList.add（“隐藏”）；
if（article.getAttribute（“数据故事”）==类名）{
文章。类列表。删除（“隐藏”）；
}
}
}
函数过滤器（类名称）{
const list=document.queryselectoral（“.list.article”）；
for（列表中的常数项）{
article.classList.add（“隐藏”）；
if（article.getAttribute（“数据年”）==类名）{
文章。类列表。删除（“隐藏”）；
}
}
}
//复位按钮
let filterSelection=document.querySelector（“故事过滤器”）；
filterSelection.addEventListener（“更改”，函数（）{
selectedFilter.classList.remove（“hidden”）；
});
函数{
storyFilter.options[0]。selected=“selected”；
yearFilter.options[0]。selected=“selected”；
selectedFilter.classList.add（“隐藏”）；
//重置文章
[…document.queryselectoral（“.article”）].forEach（（article）=>
article.classList.remove（“隐藏”）
);
}

@charset“UTF-8”；
/*机器人字体*/
@导入url（“https://fonts.googleapis.com/css?family=Roboto:100，100i，300300i，400400i，500500i，700700i，900900i&显示=交换“；
*,
*：之后，
*：之前{
框大小：边框框；
}
身体{
字体系列：“Roboto”，无衬线；
}
李{
列表样式类型：无；
}
a{
文字装饰：无；
}
.隐藏{
显示：无；
}
按钮，清除{
边界：0；
背景：#fff；
}
.包装纸{
显示器：flex；
}
.自定义\u\u选择{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
}
.自定义\u选择包装器{
位置：相对位置；
用户选择：无；
宽度：100%；
}
.自定义\u选择触发器{
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
填充：0 22px；
字体大小：20px；
字体大小：300；
颜色：#3b3b；
高度：60px；
线高：60px；
背景：#ffffff；
光标：指针；
}
.自定义选项{
位置：绝对位置；
显示：块；
背景色：#005fec；
最高：100%；
左：0；
右：0；
边界顶部：0；
过渡：均为0.5s；
不透明度：0；
可见性：隐藏；
指针事件：无；
z指数：2；
}
.custom\u select.open.custom\u选项{
不透明度：1；
能见度：可见；
指针事件：全部；
颜色：#fff；
}
.custom\u选项{
位置：相对位置；
显示：块；
填充：0 22px 0 28px；
字体大小：22px；
字体大小：300；
颜色：#fff；
线高：60px；
光标：指针；
过渡：均为0.5s；
}
.自定义选项：悬停{
光标：指针；
背景色：#b2b2b2；
}
.自定义\u选项。已选定{
颜色：#ffffff；
}
.custom\u选项。已选择：：before{
内容：“•”；
左边距：-12px；
右边填充：8px；
}
/*箭*/
.阿罗{
位置：相对位置；
高度：15px；
宽度：15px；
}
.arrow:：之前，.arrow:：之后{
内容：“；
位置：绝对位置；
底部：0px；
宽度：0.15雷姆；
身高：100%；
过渡：均为0.5s；
}
.阿罗：以前{
左：-5px；
变换：旋转（45度）；
背景色：#394a6d；
}
.arrow：：之后{
左：5px；
变换：旋转（-45度）；
背景色：#394a6d；
}
.open.arrow:：before{
左：-5px；
变换：旋转（-45度）；
}
.open.arrow:：之后{
左：5px；
变换：旋转（45度）；
}
.arrow：：之后{
左：5px；
变换：旋转（-45度）；
背景色：#394a6d；
}
.open.arrow:：before{
左：-5px；
变换：旋转（-45度）；
}
.open.arrow:：之后{
左：5px；
变换：旋转（45度）；
}

故事类型
全部的
新闻和媒体
分析
新闻稿
年
全部的
2020
2019
2018
2017
2016
清除过滤器

公司：公司1
开始日期：2020年3月26日

标题：
类型：新闻


公司：公司2
开始日期：2019年11月17日

标题：