<div id="size-chart-loading">LOADING...</div> <ul id="imageList"> <li><a href="http://placekitten.com/320/240">Image 01</a></li> <li class="selected"><a href="http://placekitten.com/320/250">Image 02</a></li> <li><a href="http://placekitten.com/320/260">Image 03</a></li> <li><a href="http://placekitten.com/320/270">Image 04</a></li> <li><a href="http://placekitten.com/320/280">Image 05</a></li> </ul>
jQuery(document).ready(function($) { $('#imageList') .after('<select name="imageSelect" id="imageSelect"></select>') .children('li').each(function() { if ($(this).hasClass('selected')) { $('#imageSelect').append($('<option selected="selected">').html($(this).text()).val($(this).children('a').attr('href'))) } else { $('#imageSelect').append($('<option>').html($(this).text()).val($(this).children('a').attr('href'))); } }) .remove(); $('#imageSelect').after('<div id="variableImage"></div>'); $('#variableImage').append('<img src="" alt="">'); switch_image(); $('#size-chart-loading').hide(); $('#imageSelect').change(function(){ switch_image(); }); function switch_image() { $('#imageSelect option:selected').each(function(){ $('#variableImage').children('img').attr({ src:$(this).val(), alt:$(this).text() }); }); } });