JSFiddle - React, Tailwind, and code Playground

by Zana

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

var pictureList = {
  '102012': 'http://38.media.tumblr.com/cd259ed0e8fb35609c559643a702dca0/tumblr_inline_n49xantfGr1s43kjo.jpg',
  '102013': 'http://38.media.tumblr.com/d88f91b6cf3da0fbc449e1e0d94c08e5/tumblr_inline_n49xaqNa8g1s43kjo.jpg',
  '102014': 'http://38.media.tumblr.com/a8e4443b222e3190648bd962fb63d8d2/tumblr_inline_n49xaxTcwo1s43kjo.jpg',
  '102015': 'http://38.media.tumblr.com/4797f9a6f81b1aa645d7a07e995b80ad/tumblr_inline_n49xbbXSbG1s43kjo.jpg'
};

$('#selectVariant').change(function () {
  //Set image src when the selected value isn't empty
  $('img').attr({
    "src": this.value && [pictureList[this.value]].join("") || ""
  });
});