Anzeige

Bild mit Selectbox ändern


#1
Hallo,

ich habe folgende Frage:

Ich habe in einem Forumlar eine selectbox, die Bildernamen enthält (z.B. test2).
Hier kann ein Bild ausgewählt werden und in einem Formular mit weiteren Parametern abgeschickt werden.

Ich möchte jedoch gerne neben (davor) der Selectbox das gerade ausgewählte Bild anzeigen.
Das Bild heißt genauso wie der Name in der selectbox, nur dass noch .gif dahinter kommt und ein Verzeichnis davor (z.B. ordner/test2.gif)

Kann mir jemand helfen, wie ich das umsetzen kann?

Vielen Dank
 

Sempervivum

Erfahrenes Mitglied
#2
So funktioniert es:
Code:
    <select id="dasselect">
            <option value="dia0">dia0</option>
            <option value="dia1">dia1</option>
            <option value="dia2">dia2</option>
        </select>
        <img id="dasbild">
        <script>
        document.getElementById("dasselect").addEventListener("change", function() {
            var src = "images/" + this.options[this.selectedIndex].value + ".jpg";
            document.getElementById("dasbild").src = src;
        });
        </script>
Pfad und Endung musst Du anpassen.
 
#3
Danke dir.
Wie kann ich es denn noch einstellen, dass standardmäßg ein Bild angezeigt wird, bevor ich eine Option in der selectbox auswähle?
 
#5
Danke, ich hätte noch eine letzte Frage.

Das erste Auswahlfeld ist Folgendes:
<option> </option>

Nun wollte ich es im Script so abfangen:
<script>
document.getElementById("ich-kartenname1").addEventListener("change", function() {
if(this.options[this.selectedIndex].value == " ") {
var src = "Layouts/Layout" + $layout[0] + "/000.gif";
} else {
var src = "Cards/" + this.options[this.selectedIndex].value + ".gif";
}
document.getElementById("ich-kartenbild1").src = src;
});
</script>

Also dass bei einem Leerzeichen eine andere Grafik angezeigt wird.
Nur das funktioniert leider nicht.

Was mache ich hier denn falsch?


Nachtrag:

Ich habe es nun mit der Zeichenlänge gelöst, da kein Bild von mir einen so kurzen Dateinamen hat.
if(this.options[this.selectedIndex].value.length <= 1) {
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#6
Schön, dass es funktioniert. Dieses Skript bezieht sich auf das value-Attribut (value=" ") und nicht auf das was zwischen den Tags stehst (<option> </option>). Eine andere Möglichkeit wäre noch gewesen, selectedIndex abzufragen:
Code:
if(this.selectedIndex == 0) {
Aber wenn es funktioniert ist es ja gut.
 
#7
Hallo,

ich habe leider noch eine Frage.
Aktuell wird der value-Wert aus den Options genommen:
<option value="VALUE">TEXT</option>

Wie kann ich den Text für den img-Code abfragen?
 
#9
Danke für die fixen Antworten.

Leider habe ich noch ein Problem.
Wie kann ich beim img-Tag das 1. Bild aus der selectbox automatisch dynamisch anzeigen lassen, ohne etwas ändern zu müssen?
Es kann je nach Abruf das 1. Bild unterschiedlich sein.
 

Sempervivum

Erfahrenes Mitglied
#10
Die Frage habe ich schon erwartet und ich hatte auch daran gedacht, das gleich so zu machen:
Code:
<select id="dasselect">
    <option value="dia0" selected>dia0</option>
    <option value="dia1">dia1</option>
    <option value="dia2">dia2</option>
</select>
<img id="dasbild">
<script>
    function bild(ele) {
        var src = "images/" + ele.options[ele.selectedIndex].textContent + ".jpg";
        document.getElementById("dasbild").src = src;
    }
    document.getElementById("dasselect").addEventListener("change", function () {
        bild(this);
    });
    bild(document.getElementById("dasselect"));
</script>
Welche Option am Anfang gesetzt sein soll, kannst Du durch das Attribut "selected" fest legen.
Mit jQuery wäre es noch einfacher, aber damit will ich nicht gleich am Anfang anfangen.
 
Anzeige

Neue Beiträge

Anzeige