Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Mehrere Values
#1
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
Zitieren
#2
Kannst du mir mal ein Beispiel zeigen, wie das aussehen soll?
Verstehe das so nicht ganz
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#4
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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#5
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste