Javascript-forum
Mehrere Values - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Mehrere Values (/showthread.php?tid=1449)

Mehrere Values - Kekr91 - 14.09.2022

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 Big Grin 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

RE: Mehrere Values - admin - 14.09.2022

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

RE: Mehrere Values - rzscout - 15.09.2022

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

RE: Mehrere Values - admin - 15.09.2022

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

RE: Mehrere Values - rzscout - 17.09.2022

Code:
let selectedOptions = Array.from(document.querySelector('select').selectedOptions).map(({ value }) => value);
(17.09.2022, 20:30)rzscout schrieb:
Code:
let selectedOptions = Array.from(document.querySelector('select').selectedOptions).map(({ value }) => value);

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

Geht auch Cool