Changing image on dropdown javascript/jquery

Question

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>

Sven van den Boogaart · Accepted Answer · 2015-04-04 20:10:04Z

3

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

answered Apr 4, 2015 at 20:10

Sven van den Boogaart

12.4k22 gold badges96 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1012181 · Accepted Answer · 2015-04-04 20:15:07Z

0

 $( 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.

answered Apr 4, 2015 at 20:15

user1012181

8,72611 gold badges74 silver badges110 bronze badges

Collectives™ on Stack Overflow

Changing image on dropdown javascript/jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related