jQuery, Change IMG SRC on selection - search for image

I asked a question a little while back and reali开发者_Python百科sed I'd made a few mistakes, I re-thought they way I'm doing it and thought I'd make a clean question again.

I have a select list,

<select id="product-variants" name="id">
<option title="AFX4000ZC-KLYSM" value="54964022" id="variant-54964022">Kelly Green</option>

<option title="AFX4000ZC-GAR3X" value="55708562" id="variant-55708562">Garnet</option>

<option title="AFX4000ZC-CHTXL" value="55708752" id="variant-55708752">Gun metal Heather</option>
</select>

Upon selection I need to search this UL

<ul style="display: none;" id="preload">

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-gunmetal-heather-icon-2_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-garnet-icon-2_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon-1_medium.jpg?1290984341">
          </li>

          <li>
             <img alt="" src="http://mysite.com/s/files/1/0055/1242/products/afx4000z-kelly-green-icon-2_medium.jpg?1290984341">
          </li>

        </ul>

Then I need it to update this image with the src

<div class="image">
   <img src="default.jpg"/>
</div>

This is what I have at the moment but it won't work because my client will not change the naming convention of the images. Can anyone advise me of a way to get around this?

    jQuery(function() {

  jQuery('[name=id]').change(function() {

    var sku = jQuery(this).find(':selected').attr('title');

    // Looking for the preloaded image which src attribute contains the sku.
    var new_src = jQuery('#preload img[src*=' + sku + ']').attr('src');

    // Updating the main image and the href attribute of the anchor element that wraps it.
    jQuery('div.image img').attr('src', new_src);
  });
});

Get the SRC of each image and use the indexOf method to see if the SKU appears in the image src, if it does, change it to default.