CODEWITHSUNDEEP
javascriptjquery
user9595480
user9595480

Reputation: 57

Image change depending to dropdown value change?

I am using Templating Example of select2 library. When first time I change dropdown value it works and preview correct image, but second time, it appends second image and do not place first image.

Js:

$(document).ready(function () {
   $('select#event_palette').change(function () {
       var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
       $("#app-bg").append("<img src='"+ selectVal + "'></img>");
     //  $("#app-bg").remove();
   });
});

Upvotes: 0

Views: 70

Answers (2)

Akshay Pethani
Akshay Pethani

Reputation: 2580

use html() instead of append().

   $(document).ready(function () {
     $('select#event_palette').change(function () {
       var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
       $("#app-bg").html("<img src='"+ selectVal + "'></img>");
   });
  });

Upvotes: 0

Rehan Haider
Rehan Haider

Reputation: 1061

You are appending new image to same node replace it to make it work.

$(document).ready(function () {
   $('select#event_palette').change(function () {
       var selectVal = 'res/img/Palette/' + $(this).val() + '-md.jpg';
       $("#app-bg").html("<img src='"+ selectVal + "'></img>");
   });
});

Upvotes: 2

Related Questions