JSFiddle - React, Tailwind, and code Playground

by Zana

HTML

<div class="content">
  <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png" class="image_264" alt="">
</div>

<div class="thumb">
  <a href="#" rel="1">
    <img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png" id="thumb_264" alt="">
  </a>
</div>

<select id="selectVariant">
  <option value="Pear1" data-name="Pear" data-price="500" data-sku="Pear1">Pear - $5.00</option>
  <option value="Apple SKU2" data-name="Apple 2" data-price="550" data-sku="Apple SKU2">Apple 2 - $5.50</option>
</select>

<p id="demo"></p>

CSS

.content img {
  width: 215px;
}

.thumb img {
  width: 75px;
}

JavaScript

var pictureList = {
  'Pear1': 'http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png',
  'Apple SKU2': 'http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png'
};

var thumbnails = [
  'http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png',
   'http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png',
  'http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png',
];
var idThumbList = {
   'Pear1': '264',
   'Apple SKU2': '496',
  'Apple SKU2': '266'
};

$('#selectVariant').change(function () {

  $('.content img').attr({
    "src": [pictureList[this.value]]
  });
  
  for(var thumb in thumbnails) {
  $('.thumb a > img').each(function() {
  $('.thumb a > img').attr({
    "src": [thumbnails[thumb]],
     "id": 'thumb_' + idThumbList[that.value]
      });
  });
  }
   
});