How to display all items until second select menu option is chosen?

Question

I have two select menus. The second select menu is dependent on what is chosen for the first select menu option. When I make the first selection, all the listed items go away.

The expected behavior is that all items will display initially. When I select the first option (ie; News and Media), then only the news articles will display. When I select the year, only the article for that year will be displayed.

 //news media array const allArticles = [ { company: "Company 1", date: "March 26, 2020", articleTitle: "Article Title", articleLink: "#", articleType: "news and media" }, { company: "Company 2", date: "November 17, 2019", articleTitle: "Article Title", articleLink: "#", articleType: "news and media" }, { company: "Company 3", date: "March 15, 2017", articleTitle: "Article Title", articleLink: "#", articleType: "analysis" }, { company: "Company 4", date: "January 3, 2016", articleTitle: "Article Title", articleLink: "#", articleType: "analysis" }, { company: "Company 5", date: "March 13, 2014", articleTitle: "Aritcle Title", articleLink: "#", articleType: "press" }, { company: "Company 6", date: "March 6, 2013", articleTitle: "Article Title", articleLink: "#", articleType: "press" } ]; //sort and substring year allArticles.sort(function (a, b) { if (a.date.substr(-4) > b.date.substr(-4)) { return -1; } if (a.date.substr(-4) < b.date.substr(-4)) { return 1; } return 0; }); function allArticlesTemplate(news) { return ` <div class="list article ${news.articleType} ${news.date.substr(-4)}"> <ul> <li><strong>Company:</strong> ${news.company}</li> <li><strong>Start Date:</strong> ${news.date}</li> <li><strong>Title:</strong> <a href="${ news.articleLink }" target="_blank">${news.articleTitle}</a></li> <li><strong>Type:</strong> ${news.articleType}</li> </ul> </div> `; } //output array data document.getElementById("newsList").innerHTML = `${allArticles.map(allArticlesTemplate).join(" ")}`; //filters var articles = document.getElementsByClassName("article"); var years = { news: [2020, 2019], analysis: [2017, 2016], press: [2014, 2013] }; const select = document.querySelector("#storyYear"); let selectedCategory, selectedYear; function changeType(value) { select.options.length = 0; select.innerHTML = '<option value="" disabled selected>Year</option>'; selectedCategory = value; years[value].forEach((e) => { const option = document.createElement("option"); option.text = e; select.insertAdjacentElement("beforeend", option); }); [...document.querySelectorAll(".article")].forEach((article) => article.classList.add("hidden")); // reset articles } function changeYear(value) { selectedYear = value; [...document.querySelectorAll("." + selectedCategory)].forEach((el) => { el.classList.contains(selectedYear)? el.classList.remove("hidden"): el.classList.add("hidden"); }); } //resetting filters let filterSelection = document.querySelector("#storyType"); filterSelection.addEventListener("change", function () { selectedFilter.classList.remove("hidden"); }); function clearSelection() { storyType.options[0].selected = "selected"; storyYear.options[0].selected = "selected"; selectedFilter.classList.add("hidden"); [...document.querySelectorAll(".article")].forEach((article) => article.classList.remove("hidden") ); // reset articles }

 li { list-style-type: none; } a { text-decoration: none; }.hidden { display: none; } button.clear { border: 0; background: #fff; }

 <div class="filter__settings"> <div class="filter__settings--type"> <span>filter by</span> </div> <select name="storyType" class="filter__settings--type" id="storyType" onChange="changeType(this.value);"> <option value="" selected="selected" disabled="disabled">Story Type</option> <option value="news">News and Media</option> <option value="analysis">Analysis</option> <option value="press">Press Releases</option> </select> <select name="year" class="filter__settings--type" id="storyYear" onChange="changeYear(this.value);"> <option value="" disabled="disabled" selected="selected">Year</option> </select> <div class="filter__settings--type"> <button class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</button> </div> </div> <div id="newsList"></div>

Answer 1

You can add few lines under 'reset articles':

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

Demo: https://jsfiddle.net/rjvs8g6k/

So, filter desired items, and remove class 'hidden' from them. PS You can use the same approach for filtering by year, i guess.