Um eine Dropdownliste mit einer Bildausgabe zu programmieren, musst du in JavaScript eine Funktion schreiben, die aufgerufen wird, wenn der Nutzer ein Element aus der Dropdownliste auswählt. In dieser Funktion kannst du das ausgewählte Element abfragen und abhängig davon das passende Bild anzeigen lassen.
Hier ist ein Beispielcode, der dir als Ausgangspunkt dienen kann:
HTML-Code für die Dropdownliste und das Bild:
<select id="imageSelect">
<option value="cat">Katze</option>
<option value="dog">Hund</option>
<option value="bird">Vogel</option>
</select>
<img id="outputImage" src="">
In diesem Beispiel gibt es eine Dropdownliste mit drei Optionen (Katze, Hund, Vogel) und ein leeres Bild-Element mit der ID "outputImage".
JavaScript-Code, um das Bild zu ändern:
const imageSelect = document.getElementById("imageSelect");
const outputImage = document.getElementById("outputImage");
imageSelect.addEventListener("change", function() {
const selectedValue = imageSelect.value;
if (selectedValue === "cat") {
outputImage.src = "katze.jpg";
} else if (selectedValue === "dog") {
outputImage.src = "hund.jpg";
} else if (selectedValue === "bird") {
outputImage.src = "vogel.jpg";
} else {
outputImage.src = "";
}
});
Dieser Code ruft die Elemente mit den IDs "imageSelect" und "outputImage" ab und fügt einen Eventlistener hinzu, der auf Änderungen in der Dropdownliste reagiert. Wenn der Nutzer ein Element auswählt, wird die Funktion ausgeführt, die das ausgewählte Element abfragt und abhängig davon das passende Bild im Bild-Element anzeigt.
Natürlich musst du die Bild-Dateinamen und Pfade anpassen, um sie mit deinem Projekt zu verbinden. Aber das sollte dir einen guten Ausgangspunkt geben, um deine Dropdownliste mit Bildausgabe zu programmieren.