如何解决如何使用onchnge仅显示由数组填充的下拉列表中的选定选项?
我正在做一个小型项目,该项目可以接收一系列电视节目片段,并且具有以下目的
-
显示所有剧集(名称,摘要和图片)
-
创建实时搜索,以搜索广告的名称和摘要 情节和子集显示包含搜索的情节 学期。
-
创建所有情节以及情节何时出现的下拉列表 仅点击显示那集。
以下代码实现了第一个和第二个目标。但是,我被困在第三天了。我已经使用filter
将具有搜索项的剧集存储在称为“ filteredEpisodes”的变量中,将使用displayEpisodes ()
函数填充此剧集数组,这适用于第二个目标。
对于第三个目标,我尝试使用onchange
来存储-从下拉列表中单击的情节-将其存储在“ filteredEpisodes”变量中。这样,代码将仅显示从下拉列表中选择的情节。
任何回应都将不胜感激。
//variables declaration
var allEpisodes = getAllEpisodes();
var episodeFrames = document.getElementById('episodeFrames');
var searchBar = document.getElementById('searchBar');
var episodeCode = "";
var searchResults = document.getElementById('searchResults');
var selectList = document.getElementById("selects");
// Live Search
searchBar.addEventListener('keyup',function(e){
var searchTerm = e.target.value.toLowerCase();
var filteredEpisodes = allEpisodes.filter((episode) => {
return (
episode.name.toLowerCase().includes(searchTerm) ||
episode.summary.toLowerCase().includes(searchTerm)
);
});
displayEpisodes(filteredEpisodes);
});
// display episods function
const displayEpisodes = (filteredEpisodes) => {
/*
this code is not working however it is supposed
to store -the episode that was clicked from the dropdown list- it is supposed to store it
in the "filteredEpisodes" variable. This way the code will only display the selected episode
from the dropdown list
*/
selectList.onchange = function () {
filteredEpisodes = allEpisodes.filter((episode) => {
this.value.toLowerCase() == episode.name.toLowerCase();
});
}
// using map to populate the page with the filtered episodes
const htmlString = filteredEpisodes.map((episodes) => {
// creating a dropdown list
var option = document.createElement("option");
option.value = episodes.name;
option.text = episodes.name;
selectList.appendChild(option);
// episodes format code
if (episodes.number <= 9 && episodes.season <= 9) {
episodeCode = `S0${episodes.season}E0${episodes.number}`;
} else if (episodes.number <= 9 && episodes.season > 9) {
episodeCode = `S${episodes.season}0E${episodes.number}`;
} else if (episodes.number > 9 && episodes.season <= 9) {
episodeCode = `S0${episodes.season}E${episodes.number}`;
} else if (episodes.number > 9 && episodes.season > 9) {
episodeCode = `S${episodes.season}E${episodes.number}`;
}
// displaying episodes
return `
<div>
<h2>${episodes.name} ${episodeCode}</h2>
<p> ${episodes.summary}</p>
<img src="${episodes.image.medium}"></img>
</div>
`;
});
searchResults.innerHTML = `Displaying ${htmlString.length} of ${allEpisodes.length}`;
episodeFrames.innerHTML = htmlString;
};
/* calling the display function with all episodes as parameter in order to diplay
all the episodes before entering a search term */
displayEpisodes(allEpisodes);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。