JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<img src="http://38.media.tumblr.com/cd259ed0e8fb35609c559643a702dca0/tumblr_inline_n49xantfGr1s43kjo.jpg" />
<select id="selectVariant">
  <option value="102012" class="">Medium</option>
  <option value="102013" class="">Large</option>
  <option value="102014" class="">XL</option>
  <option value="102015" class="">2XL (+$3.00)</option>
</select>

JavaScript

$('#selectVariant').change(function () {     
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    var that = this;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
        var pictureList = {};

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

        $.each(data.productVariantImages,function(i, productVariantImages){
            pictureList[data.sku] = this.imagePath;
        });
        console.log(pictureList);

        $('.content img').attr({"src":[pictureList[that.value]]}); 
        }
    });
        return false;
});