多个选择标签以过滤纯 JavaScript 中的列表

Question

我正在为我的选择标签使用 onchange 函数来根据选择选项值过滤项目列表。

我目前拥有的代码仅适用于单个选择标签，但我希望它能够适用于多个选择标签，这需要每个选择选项值配合。

例如，如果我将“部门”和“位置”作为列表中每个项目的标签，并在选择标签中选择部门 -> IT 和位置 -> 纽约，我只想查看纽约的 IT 部门。

我很难理解如何正确地做到这一点。我会假设某种 for 循环来获取每个选择标签，然后在每个选择标签中获取当前选项的值，并且仅在它们符合选择选项值条件时才显示列表项。

如果能帮助我实现这一目标，我将不胜感激！

HTML：

<select class="filterTags" id="filterDepartment">
    <option>All</option>
    <option>IT</option>
    <option>Marketing</option>
</select>

<select class="filterTags" id="filterLocation">
    <option>All</option>
    <option>New York</option>
    <option>Washington</option>
</select>

<div class="tags-container">
    <div class="tags tags-departments">
        <span class="department tag">IT</span>
        <span class="department tag">Marketing</span>
    </div>
    <div class="tags tags-locations">
        <span class="location tag">New York</span>
        <span class="location tag">Washington</span>
    </div>
</div>

JavaScript：

var selectClass = document.getElementsByClassName("filterTags")
selectClass = selectClass[0]

selectClass.onchange= function() {
    var filterOptions, tags, i, span;
    filterOptions = this.options[this.selectedIndex].value
    tags = document.getElementsByClassName("tags-departments")
    span = document.querySelectorAll(".department")
    for (i = 0; i < tags.length; i++) {
        if (span) {
            if (span[i].innerHTML.indexOf(filterOptions) > -1) {
                span[i].parentNode.parentNode.parentNode.style.display = ""
            } else {
                span[i].parentNode.parentNode.parentNode.style.display = "none"
            }
            if(filterOptions == "All") {
                span[i].parentNode.parentNode.parentNode.style.display = ""
            }
        }
    }
}

Answer 1

好吧，我建议以下逻辑，在两个选择元素的onchange事件中添加一个函数，该函数将：

1. 检测触发事件的选择元素的 ID。
2. 根据触发更改的选择元素，循环遍历相应的 span 元素。
3. 对于每个跨度，根据选择中的选定值，检查是否应显示。

这是一个完整的代码and a working example with it：

//Iterate the selection elements and add the function to the 'change' event
sels = document.getElementsByTagName('select');
 for(i=0; i<sels.length; i++) 
 {
  sels[i].addEventListener('change', function() {
     //get the selection id of the selected that was change - this returns the selection element
     selectionID = this.id;
     if(selectionID === "filterDepartment")
     {
         //the value of the selected department
         var selectedDepartment = document.getElementById("filterDepartment").value
         //we will iterate the departments spans and check their text value agains the selected department value (or if the value is 'All' we dont need to check//
         var spans = document.getElementsByClassName('tags tags-departments')[0].getElementsByTagName('span'); 
         for(var i = 0; i < spans.length; i++)
         {
             if(selectedDepartment == "All" || spans[i].innerText == selectedDepartment)
             {
                 spans[i].style.display = "block";
             }
             else
             {
                 spans[i].style.display = "none";
             }
         }
     }

     if(selectionID === "filterLocation")
     {
         var selectedLocation = document.getElementById("filterLocation").value;
         var spans = document.getElementsByClassName('tags tags-locations')[0].getElementsByTagName('span');
         for(var i = 0; i < spans.length; i++)
         {
             if(selectedLocation == "All" || spans[i].innerText == selectedLocation)
             {
                spans[i].style.display = "block";
             }
             else
             {
                spans[i].style.display = "none";
             }
         }
     }
  }, false);}