AJAX Bild aus Auswahlbox aktualisieren

DanRho · 13. Oktober 2013

Hallo liebe Programmier freunde

Ich stoße derzeit auf ein kleines Problem mit meiner seite

Ich habe leider keine große erfahrung mit ajax und jquery deshalb frage ich euch im hilfe..... hier mal mein Problem

wenn ich in dem feld ein anderes Bild angezeigt bekommen möchte muss ich jedesmal den Auswählen button klicken und die gesamte seite Aktualisiert sich ... das möchte ich nicht

ich will in der auswahlbox auf "2" gehen und es soll bild 2 anzeigen ..... ich hoffe mal irgendjemand versteht mein Vorhaben ......

PHP

<div id='vorschau' style='float:left; margin-left:100px;'>
            <form action='index.php' method='GET'>
            <input type='hidden' name='cmd' value='".getvar('cmd')."'>

                <select name='pic'>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <input type='submit' value='ausw&auml;hlen'><br>    
                <img src='Bilder/".$this->ladebild().".bmp' style='width:300px; height:300px;'>
            </form>
        </div>"

Alles anzeigen

lg Nils

Binär · 13. Oktober 2013

Als erstes musst du deinen SELECT-Box Options Values geben und danach einen onChange. Das bewirkt halt bei Auswahl einer Option, das dieses Event ausgeführt wird.
Dadrüber musst du noch eine JavaScript Funktion festlegen und dem Image-Tag noch eine ID geben.

Code

<select onchange="setPicture(this.options[this.selectedIndex].value);" name='pic'>
                    <option value="1.bmp">1</option>
                    <option value="2.bmp">2</option>
                    <option value="3.bmp">3</option>
                    <option value="4.bmp">4</option>
                    <option value="5.bmp">5</option>
</select>


<img src='1.bmp' id="imagePreview" style='width:300px; height:300px;'>

JavaScript Code

Code

<script type="text/javascript">
function setPicture(id) {
     document.getElementById("imagePreview").src = id;
}
</script>

Dann sollte es klappen.

DanRho · 14. Oktober 2013

oar cool hat geklappt danke

breadfish.de 12. März 2022