CODEWITHSUNDEEP
javascriptjqueryhtml
pythonismyjam
pythonismyjam

Reputation: 99

Changing image on dropdown javascript/jquery

I am trying to replicate this simple example but for the life of me cannot get it to work. The first picture displays, but it doesn't ever change. Forgive me if this is basic, I am pretty new with javascript.

<html>
<head>
    <script src="/js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
    var pictureList = [
        "http://lorempixel.com/400/200/sports/1",
        "http://lorempixel.com/400/200/sports/2",
        "http://lorempixel.com/400/200/sports/3",
        "http://lorempixel.com/400/200/sports/4",
        "http://lorempixel.com/400/200/sports/5", ];

    $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pictureList[val]);
    });

    </script>
</head>
<body>
    <img src="http://lorempixel.com/400/200/sports/1" />
    <select id="picDD">
        <option value="1" selected>Picute 1</option>
        <option value="2">Picute 2</option>
        <option value="3">Picute 3</option>
        <option value="4">Picute 4</option>
        <option value="5">Picute 5</option>
    </select>
</body>
</html>

Upvotes: 1

Views: 676

Answers (2)

user1012181
user1012181

Reputation: 8726

 $( document ).ready(function() {
    $('#picDD').change(function () {
        var val = parseInt($('#picDD').val());
        $('img').attr("src",pictureList[val]);
    });
});

In the jsFiddle, you don't have to specify the document ready function as it is done dynamically. Try this, it should work for you.

Upvotes: 0

Sven van den Boogaart
Sven van den Boogaart

Reputation: 12317

You need to place your code in :

 // A $( document ).ready() block.
 $( document ).ready(function() {
    // Your code here.
 });

Else your code wont work. In jsfiddle you can see on the left the javascript is loaded onDomready

Upvotes: 3

Related Questions