This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

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:

<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:
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
<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
Als Lösung markieren 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:
<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:
'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
Als Lösung markieren Zitieren
#4
Sowas
<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
Als Lösung markieren Zitieren
#5
let selectedOptions = Array.from(document.querySelector('select').selectedOptions).map(({ value }) => value);

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


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
Als Lösung markieren Zitieren


Gehe zu:


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