title: jQuery/javascript - change image based on dropdown selection
body: <p>I have an existing ecommerce page where I have this code for a dropdown menu:</p>
  
  <pre><code>&lt;select data-optgroup="10201" class="prodoption detailprodoption" onchange="updateoptimage(0,0)" name="optn0" id="optn0x0" size="1"&gt;&lt;option value=""&gt;Please Select...&lt;/option&gt;&lt;option value="102011" class=""&gt;Small&lt;/option&gt;
  &lt;option value="102012" class=""&gt;Medium&lt;/option&gt;
  &lt;option value="102013" class=""&gt;Large&lt;/option&gt;
  &lt;option value="102014" class=""&gt;XL&lt;/option&gt;
  &lt;option value="102015" class=""&gt;2XL (+$3.00)&lt;/option&gt;
  &lt;option value="102016" class=""&gt;3XL (+$5.00)&lt;/option&gt;
  &lt;option value="102017" class=""&gt;4XL (+$7.00)&lt;/option&gt;
  &lt;option value="102018" class=""&gt;5XL (+$7.00)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I need to be able to insert an image and have the image change based on the dropdown selection. I know how insert an image using a jquery function, but dont know how to change it. This should be a relatively easy task, but cant seem to figure it out. I think I need to set up an array that matches the values of the dropdowns to the img src that I desire. I'd also like to include a php variable that is generated via PHP if that is possible. Im sure this is a hot mess, but any direction I can get is appreciated.</p>
  
  <pre><code>var phpcode = [ &lt;?php = ...... ?&gt; ]
  var pictureList = 
      [ '10211' , 'images/sample1'],
      [ '10212' , 'images/sample2'],
      [ '10213' , 'images/sample3'],
      [ '10214' , 'images/sample4'],
      [ '10215' , 'images/sample5'];
  
  
  $('.detailprodoption').change(function () {
      $('img').attr("src",pictureList[],phpcode[],".jpg");
  });
  </code></pre>
  
  <p>I need the final output to be something like "images/sample5-phpcode.jpg</p>