data-path auslesen

[conny64]

Hi, ich habe hier URL ein für mich brauchbares Script gefunden um bei <select> <option> eine Grafik anzuzeigen.
Da ich mich mit JS nicht auskenne bekomme ich das nicht hin.
Ich würde gerne den PATH in data-path schreiben und nicht wie im Script im VALUE.

Bsp.:

<img class="imageNews" />
<br />
<br />
<select name="image" id="image" class="form-control" onChange="imageUpdate();">
    <option value="1" data-path="http://placekitten.com/200/300">http://placekitten.com/200/300</option>
    <option value="2" data-path="http://placekitten.com/100/300">http://placekitten.com/100/300</option>
    <option value="3" data-path="http://placekitten.com/100/100">http://placekitten.com/100/100</option>
    <option value="4" data-path="http://placekitten.com/20/100">http://placekitten.com/20/100</option>
</select>

function imageUpdate() {
    var image = $("select#image").val();
    var path = "";
    var src = $("img.imageNews").attr({
        src: path + image,
        title: "Image",
        alt: "Image"
    });
}

Dazu müsste ich jetzt im JS ändern, dass es wieder funktioniert.
Sorry JS ist echt nicht mein Ding. Ich habe jetzt schon mehrere Stunden zugebracht und versucht micht schlau zu lesen.
Ich bekomme es einfach nicht hin
LG Conny

[protestix]

Mein Tipp dazu* lass es sein, es ist nicht für Blinde usw. geeignet.
Wenn es denn unbedingt Bilder sein müssen die du zur Auswahl stellst fällt dir sicherlich eine andere Lösung ein.

*ist nicht so das es nicht möglich ist, sondern sehr aufwendig und nicht W3C konform, geschweige denn zukunftssicher.

[conny64]

Ok. Hatte ich mir leichter vorgestellt ...heul...

[erc]

Mit jquery greifst du mit https://api.jquery.com/data/ drauf zu. (Mit Plain JS image.dataset.path.) Das ist eine einzellne Zeile die du anpassen musst. Statt .val() ist es .data('path').
Was diese Bedenken mit behindertengerecht sollen, ist mir schleierhaft.

[conny64]

Leider funktioniert das so noch nicht ganz.
Schau mal bitte: http://jsfiddle.net/Conny64/ay40pfbh/

[erc]

Du brauchst path von der selektierten Option und nicht von dem Select ansich. (hab ich auch nicht dran gedacht)

var image = $("#image option:selected").data("path");

[protestix]

Ich ging davon aus dass im Option Element die Grafiken angezeigt werden sollten, habe ich wohl falsch verstanden.

um bei <select> <option> eine Grafik anzuzeigen

[conny64]

erc Du bist mein Hero - das hat super gekappt !! DANKE !!

protestix Das könnte ich als Lösung evtl. auch verwenden. Aber so wie es jetzt erc gelöst hat sieht es super aus.

Den rest erledige ich jetzt über CSS

[conny64]

Mit Bootstrap3 habe ich es hinbekommen, dass Bilder mit im Select angezeigt werden.
4MdIS0SSXB.png

Das ganze habe ich kurz dokumentiert in der unteren Hälfte http://jsfiddle.net/Conny64/ay40pfbh/

[protestix]

Der Aufwand der dabei unternommen wurde ist auch nicht zu unterschätzen. Fast 1400 Zeilen Code und JQuery wird auch noch vorausgesetzt.
Code im Github Projekt.