Javascript 在选择第二个选择菜单选项之前，如何显示所有项目？

我有两个选择菜单。第二个选择菜单取决于为第一个选择菜单选项选择的内容。当我做出第一个选择时，所有列出的项目都消失了

预期的行为是最初显示所有项目。当我选择第一个选项（即新闻和媒体）时，将只显示新闻文章。当我选择年份时，仅显示该年份的文章

//新闻媒体阵列
常数所有粒子=[
{
公司：“公司1”，
日期：“2020年3月26日”，
文章标题：
“文章标题”，
articleLink:“#”，
文章类型：“新闻与媒体”
},
{
公司：“公司2”，
日期：“2019年11月17日”，
文章标题：
“文章标题”，
articleLink:“#”，
文章类型：“新闻与媒体”
},  
{
公司：“公司3”，
日期：“2017年3月15日”，
文章标题：
“文章标题”，
articleLink:“#”，
文章类型：“分析”
},
{
公司：“公司4”，
日期：“2016年1月3日”，
文章标题：
“文章标题”，
articleLink:“#”，
文章类型：“分析”
},  
{
公司：“公司5”，
日期：“2014年3月13日”，
文章标题：“算术题”，
articleLink:“#”，
文章类型：“新闻”
},
{
公司：“公司6”，
日期：“2013年3月6日”，
文章标题：“文章标题”，
articleLink:“#”，
文章类型：“新闻”
}
];
//排序和子串年
allArticles.sort（函数（a，b）{
如果（a.date.substr（-4）>b.date.substr（-4））{
返回-1；
}
如果（a.date.substr（-4）
公司：${news.Company}
开始日期：${news.Date}
标题：
类型：${news.articleType}

`;
}
//输出阵列数据
document.getElementById（“新闻列表”）.innerHTML=`${allArticles
.map（allArticlesTemplate）
.join（“”）`；
//过滤器
var articles=document.getElementsByClassName（“article”）；
风险值年={
新闻：[2020年、2019年]，
分析：[2017年、2016年]，
新闻：[2014年、2013年]
};
const select=document.querySelector（“故事年”）；
让selectedCategory，selectedYear；
函数changeType（值）{
选择.options.length=0；
select.innerHTML='Year'；
selectedCategory=值；
年[价值].forEach（（e）=>{
const option=document.createElement（“选项”）；
option.text=e；
选择.insertAdjacentElement（“beforeend”，选项）；
});
[…document.queryselectoral（“.article”）].forEach（（article）=>article.classList.add（“hidden”）；//重置articles
}
功能更改年份（值）{
selectedYear=值；
[…document.querySelectorAll（“.”+selectedCategory）].forEach（（el）=>{
el.classList.contains（selectedYear）
？el.类列表。删除（“隐藏”）
：el.classList.add（“隐藏”）；
});
}
//重置过滤器
让filterSelection=document.querySelector（“故事类型”）；
filterSelection.addEventListener（“更改”，函数（）{
selectedFilter.classList.remove（“hidden”）；
});
函数{
故事类型。选项[0]。selected=“selected”；
故事年。选项[0]。selected=“selected”；
selectedFilter.classList.add（“隐藏”）；
[…document.queryselectoral（“.article”）].forEach（（article）=>
article.classList.remove（“隐藏”）
)；//重置项目
}

li{
列表样式类型：无；
}
a{
文字装饰：无；
}
.隐藏{
显示：无；
}
按钮，清除{
边界：0；
背景：#fff；
}

过滤
故事类型
新闻和媒体
分析
新闻稿
年
清除过滤器

您可以在“重置文章”下添加几行：

 res=[...document.querySelectorAll(".article")].filter((article) => article.classList.contains(value));
 res.forEach(x=>x.classList.remove('hidden'))

演示：

---

所以，过滤所需的项目，并从中删除“隐藏”类。注：我想，您可以使用相同的方法按年份进行过滤。

“预期的行为是，所有项目最初都会显示。当我选择第一个选项（即新闻和媒体）时，只有新闻文章会显示”这两句话相互矛盾other@TJ-页面加载时，将显示所有项目。我选择“新闻和媒体”，则仅显示新闻文章。其他文章将不显示。这是一个过滤器。我正在选择要显示的内容。非常感谢！Np，很乐意帮忙。