Javascript 在JS中使用select字段筛选元素时出现问题

我正在开发一种图片管理应用程序，我有一个用于过滤图片的部分。我有3个输入字段：2个选择框（一个用于选择位置，另一个用于选择事件）和一个日期选择器。我已将图片包装在

Photo（）

对象中，其中包括图片的路径、日期、事件和位置

我希望它的工作方式是：如果您选择一个位置，则该位置的所有图片将显示在预览中，但如果您同时选择一个事件，则该位置和事件的所有图片（同时）将显示在预览中，同样，如果您选择一个日期，则该日期的所有图片，将同时选择事件和位置

以下是我对这一部分的HTML：

<div id="newAlbumExtraDetails"> 
    <a>Filter:</a>
    <select id="newAlbumLocation" onchange="previewUpdater('subsequent')">
        <option value="" disabled selected hidden>Localization...</option>
    </select>
    <select id="newAlbumEvent" onchange="previewUpdater('subsequent')">
        <option value="" disabled selected hidden>Event...</option>
    </select>
    <input type="date" id="newAlbumDate" name="newAlbumDate" onchange="previewUpdater('subsequent')">
    <button type="button" class="formButton"  id="saveAlbumButton" onclick="saveAlbum()">Save Album</button>
    <button type="button" class="formButton"  id="discardAlbumButton" onclick="goBack()">Discard Album</button>    
</div>

我只能想办法显示具有该位置、事件或日期的所有图片，或者显示具有该位置的所有图片、具有该事件的所有图片以及具有该日期的所有图片（重复）

---

提前感谢您，我已经看了几个小时了，最后承认失败了。

您需要一个单一的过滤功能来解释所有可用的过滤器。大概是这样的：

if (scope=="subsequent") {
  const defaultLocation = "Localization...";
  const defaultEvent = "Event...";
  const defaultDate = "";

  // Remove photos that were already there
  while (previewBox.lastElementChild) {
      previewBox.removeChild(previewBox.lastElementChild);
  }

  // Getting data from the select fields and date picker
  let selectedLocation = locationSelector.options[locationSelector.selectedIndex].text;
  let selectedEvent = eventSelector.options[eventSelector.selectedIndex].text;
  let selectedDate = dateSelector.value

  for (let i = 0; i < currentPhotos.length; i++) {
    let currentPicture = currentPhotos[i];
  
    // This is currently doing nothing, it's just my way of knowing if the select fields
    // and date picker have been selected or are in their default values:
    if (selectedLocation != "Localization..." || selectedEvent != "Event..." || selectedDate != "" ) {
        console.log("selected!")
    }

    if((selectedLocation == defaultLocation || currentPicture.location == selectedLocation) && 
       (selectedEvent == defaultEvent || currentPicture.event == selectedEvent) && 
       (selectedDate == defaultDate || currentPicture.date == selectedDate)) {

        let newDiv = document.createElement("div");
        let newImg = document.createElement("img");
            
        // From here on it's simply adding the pictures to the preview box
        newImg.setAttribute("src", currentPhotos[i].path);
        newImg.addEventListener("click", openPhotoViewer)
    
        newDiv.appendChild(newImg)
        previewBox.appendChild(newDiv)
    }
  }
}

if（范围==“后续”）{
const defaultLocation=“本地化…”；
const defaultEvent=“事件…”；
const defaultDate=“”；
//删除已存在的照片
while（previewBox.lastElementChild）{
previewBox.removeChild（previewBox.lastElementChild）；
}
//从选择字段和日期选择器获取数据
让selectedLocation=locationSelector.options[locationSelector.selectedIndex].text；
让selectedEvent=eventSelector.options[eventSelector.selectedIndex].text；
让selectedDate=dateSelector.value
对于（设i=0；i

为什么不显示previewUpdater的所有代码？在剩下的代码中可能会有冲突/破坏最终答案的东西。我不认为这与此相关，但我明白你的观点，威尔补充道。这似乎正是我想要的，谢谢你的回复。我现在不能测试，但我今天晚些时候会报告。好吧，这正是我需要的，你是个天才。谢谢顺便问一下，你是从纯粹的算法思想中知道的，还是从多次处理这类问题中知道的？我很好奇，很难区分我从经验中学到的东西和我从正式场合学到的东西，但考虑到这几乎是我的谋生之道，我想说这一点来自经验：）

if (scope=="subsequent") {
  const defaultLocation = "Localization...";
  const defaultEvent = "Event...";
  const defaultDate = "";

  // Remove photos that were already there
  while (previewBox.lastElementChild) {
      previewBox.removeChild(previewBox.lastElementChild);
  }

  // Getting data from the select fields and date picker
  let selectedLocation = locationSelector.options[locationSelector.selectedIndex].text;
  let selectedEvent = eventSelector.options[eventSelector.selectedIndex].text;
  let selectedDate = dateSelector.value

  for (let i = 0; i < currentPhotos.length; i++) {
    let currentPicture = currentPhotos[i];
  
    // This is currently doing nothing, it's just my way of knowing if the select fields
    // and date picker have been selected or are in their default values:
    if (selectedLocation != "Localization..." || selectedEvent != "Event..." || selectedDate != "" ) {
        console.log("selected!")
    }

    if((selectedLocation == defaultLocation || currentPicture.location == selectedLocation) && 
       (selectedEvent == defaultEvent || currentPicture.event == selectedEvent) && 
       (selectedDate == defaultDate || currentPicture.date == selectedDate)) {

        let newDiv = document.createElement("div");
        let newImg = document.createElement("img");
            
        // From here on it's simply adding the pictures to the preview box
        newImg.setAttribute("src", currentPhotos[i].path);
        newImg.addEventListener("click", openPhotoViewer)
    
        newDiv.appendChild(newImg)
        previewBox.appendChild(newDiv)
    }
  }
}