Can Javascript filters be scaled?

Okay so new answer,
After reviewing I realized your problem wasn’t so simple but I now have an answer

I think your code is not only not scalable due to the issue that you would have exponential if statements, but also optimization. If you had millions of elements you would have to check every element against every filter value for absolutely every call which doesn’t make a lot of sense and would slow things down severely.

Here’s my answer:

Create an object that stores the corresponding index to filter.

This will be easily changeable and can be appended if you add more filters.

filterKeys = {
    'yearFounded': 4,
    'KCPWinner': 5
};

Now we can reference this in the function call which will make things more efficient.

Secondly, we need to minimize the amount of loop instances that are occurring which will allow for the inclusion of large amounts of data.

For example: If the year is changed, we only need to check against other filters IF the current element contains a year that is selected. So the preliminary check will be on the filter category that was changed. To do this we can pass in ‘this’ in the onchange event callback which references the current element that was changed.

<select onchange = "foo(this)">SELECT</select>

In javascript we need to loop through every element and check ONLY the index of the filter category that was changed — in this case — years. If it is contained in the current list of selected years, then and only then will it check against other filters. Also, we can minimize code by checking to see if the other filters contain a value that matches the value of the element and corresponding index. If that explanation doesn’t make a lot of sense hopefully it’ll be clearer with my example code:

function foo (filter) {
    const table = document.getElementById("mytableID"); // get table
    const tr = table.getElementsByTagName("tr"); // get table elements
    const index = filterKeys[filter.id]; // Reference the filterKeys object to obtain the index that corresponds
    const values = getSelectValues(document.getElementById(filter.id));
    let otherValues = [];
    let otherIndex;
    let isOk = True;
    let isEmpty = False;

    if (values = "") {
        isEmpty = True;
    }

    // loop through each table element
    for (let i = 0; i < tr.length; i++) {
        
        // if the element at the corresponding index is included in the selected values or values is empty
        if (values.includes(tr[i].children[index] || isEmpty) {
           
           // loop through the rest of the filter keys object
           for (const key in filterKeys) {
                // get the other values using the key
                otherValues = getSelectValues(document.getElementById(key));
                // get the other index using the key and object
                otherIndex = filterKeys[key]
               // if the other values do not include the child's corresponding index value and it's not empty then turn it off and break the loop
               if (!otherValues.includes(tr[i].children[otherIndex]) && otherValues != "") {
                   tr[i].style.display = "none" // turn it off
                   isOk = False;
                   break;
               }
           }
           
           // if isOk is True then it meets all the requirements
           if (isOk) {
               tr[i].style.display = "block"// turn it on
           }
           isOk = True; // set back to True for next iteration
         }
              
        else {
           tr[i].style.display = "none"// turn it off because it does not meet the requirement
        }
    }