如何使用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 (将#修改为@）

dropdown javascript onchange