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

[admin]

Kannst du mir mal ein Beispiel zeigen, wie das aussehen soll?
Verstehe das so nicht ganz

[rzscout]

Hi Kekr91,
es ist schwierig zu verstehen was du möchtest, wenn man nicht das ganze sieht.

Du kanns mit HTML ein Select erstellen und mehrere Elemente zur Auswahl stellen. Vielleicht helfen dir diese Codeschnipsel weiter:

HTML:

Code:

<select id="trainer" multiple="multiple" size="2">
  <option value="trainer-i" data-typ="trainer">Trainer I</option>
  <option value="trainer-a" data-typ="trainer">Trainer A</option>
  <option value="trainer-u" data-typ="trainer">Trainer U</option>
  <option value="player-x" data-typ="player">Player X</option>
</select>

JavaScript:

Code:

'use strict';
let liste = document.querySelector('#liste option');
liste.forEach((item, i) => {
  if(item.dataset.typ != "trainer") {
    item.classList.add('hide');
    item.setAttribute('disabled', 'disabled');
  } else {
    item.classList.remove('hide');
    item.removeAttribute('disabled', 'disabled');
  }
});

Viel Erfolg mit dem Code und ich hoffe es hilft dir weiter.

Viele Grüße
rzscout

[admin]

Sowas

Code:

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

Ist eigentlich nicht erlaubt. Du darfst keine 2 Values benutzen. Dafür könnte man data benutzen , oder in einen Value mehrere Werte speichern

[rzscout]

Code:

let selectedOptions = Array.from(document.querySelector('select').selectedOptions).map(({ value }) => value);

---

Code:

let selectedOptions = Array.from(document.querySelector('select').selectedOptions).map(({ value }) => value);

Code:

Object.keys(document.querySelector('select').selectedOptions);

Geht auch