Mehrere Values

[Kekr91]

Hallo Leute,
ich hoffe ihr könnt mir ein wenig auf die Sprünge helfen.
Vorab: bin kein gelernter Programmierer und bringe mir alles selbst bei nur manchmal ist es sehr mühseelig mehrere Tage einfach zu keinem Ergebnis zu finden.

Ich bin dabei eine Liste zu erstellen mit Filtermöglichkeit.
Folgende Optionen:

Code:

<select id="idTyp">
    <option value="all">Alle Typen</option>
    <option value="Pflanze">Pflanze</option>
    <option value="Feuer">Feuer</option>
    <option value="Wasser">Wasser</option>
    <option value="Elektro">Elektro</option>
    <option value="Psycho">Psycho</option>
    <option value="Kampf">Kampf</option>
    <option value="Finsternis">Finsternis</option>
    <option value="Metall">Metall</option>
    <option value="Fee">Fee</option>
    <option value="Drache">Drache</option>
    <option value="Farblos">Farblos</option>
    <option value="Trainer (I)" value="Trainer (A)">Trainer</option>
    <option value="Spezial-Energie">Spezial-Energie</option>
</select>

<select id="idSeltenheit">
    <option value="all">Alle Stufen</option>
    <option value="häufig">häufig</option>
    <option value="nicht so häufig">nicht so häufig</option>
    <option value="selten">selten</option>
    <option value="selten, holo">selten, holo</option>
    <option value="ultraselten">ultraselten</option>
    <option value="selten, holo GX">selten, holo GX</option>
    <option value="selten, prisma-stern">selten, prisma-stern</option>
    <option value="selten, regenbogen">selten, regenbogen</option>
    <option value="selten, geheim">selten, geheim</option>
</select>

<input type="button" onclick="SearchData();" value="Filtern" />

Hier das ensprechende JS:

Code:

const table = document.getElementById("cardListTable");
const tr = table.getElementsByTagName("tr");

function SearchData() {

    var typ = document.getElementById("idTyp").value.toUpperCase();
    var seltenheit = document.getElementById("idSeltenheit").value.toUpperCase();

    for (i = 1; i < tr.length; i++) {
        
        var rowTyp = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
        var rowSeltenheit = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();
        var isDiplay = true;

        if (typ != 'ALL' && rowTyp != typ) {
            isDiplay = false;
        }
        if (seltenheit != 'ALL' && rowSeltenheit != seltenheit) {
            isDiplay = false;
        }

        if (isDiplay) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

Mein Problem:
Ich möchte gerne bei dieser Option

Code:

<option value="Trainer (I)" value="Trainer (A)">Trainer</option>

mehrere Values einbinden.
Es gibt die Werte Trainer (I) , Trainer (A), Trainer (U), usw. und alle sollen mit dem Wert "Trainer" gleichzeitg angezeigt werden.

Wie kann ich das am besten bewerkstelligen?

Ich hoffe sehr auf eure Hilfe.
Vielen Dank