title: jQuery find value then replace SRC
body: <p>Can anyone see anything that is wrong with this code it just isn't working...</p>
  
  <p>I am tring to: </p>
  
  <p>get the value of #product-variants-option-0 </p>
  
  <p>search #preload for the relevant image and </p>
  
  <p>then change div.image img src to that image</p>
  
  <pre><code>jQuery(document).ready(function($) {
     $('#product-variants-option-0').change(function() {
  
       // What is the sku of the current variant selection.
       var select_value = $(this).find(':selected').val();
  
              if (select_value == "Kelly Green") {
               var keyword = "kly";
              };
  
          var new_src = $('#preload img[src*=keyword]');
  
          $('div.image img').attr('src', new_src);
  
     });
   });
  </code></pre>
  
  <p>The selection:</p>
  
  <pre><code>&lt;select class="single-option-selector-0" id="product-variants-option-0"&gt;
  &lt;option value="Kelly Green"&gt;Kelly Green&lt;/option&gt;
  &lt;option value="Navy"&gt;Navy&lt;/option&gt;
  &lt;option value="Olive"&gt;Olive&lt;/option&gt;
  &lt;option value="Cocoa"&gt;Cocoa&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm trying to search an unordered list:</p>
  
  <pre><code>&lt;ul id="preload" style="display:none;"&gt;
  &lt;li&gt;&lt;img src="0z-kelly-green-medium.jpg"/&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="0z-olive-medium.jpg"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The image I'm trying to replace is this:</p>