HTML/Jquery/Javascript - Teilnehmer hinzufügen?
Hallo zusammen :)
Habe folgendes PRoblem
Eine Liste an gesamte Studenten auf der Rechten Seite bei der es möglich sein soll, eine einzelne Zeile auszuwählen, auf das Plus zu klicken und den Teilnehmer in der linke Spalte einzublenden: Wie selektier ich die Optionen als Child Element und lasse sie Hilden und shown?
Ich brauch echt keinen Code, also wär natürlich cool aber eine kurze Erklärung wie ich an die Sache rangehen soll wäre mega! DANKE!!
Fotos von Code und HTML im Anhang:
2 Antworten
Der Plus-Button benötigt einen Handler, der auf das Klickereignis reagiert. Im Handler müsstest du herausfinden, welche Option gerade im rechten Feld selektiert ist.
const studentSelection = document.getElementById("studenten");
plusButton.addEventListener("click", evt => {
const selectedIndex = studentSelection.selectedIndex;
// ...
});
Wenn es einen selektierten Wert gibt (der Index wäre dann nicht -1), kannst du anhand des Index auch das option-Element ermitteln, welches du entfernen / verschieben müsstest. Entweder nutzt du dafür eine Schleife, die über die Kindknoten des select-Elements iteriert oder du baust dir einen passenden Selektor (Stichworte: querySelector, :nth-child). Ein dritter Lösungsweg wäre es, das Property selectedOptions zu verwenden, statt erst den Index zu ermitteln.
Mit der appendChild-Methode kannst du das Element an das andere Auswahlfeld hängen. Diese Aktion kopiert das Element nicht, sondern verschiebt es direkt.
Als Nachschlagewerk kannst du MDN nutzen.
Hier kannst du z.B. verschiedene Vorschläge für eine Lösung finden:
https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css