Edit in JSFiddle

<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()
			});
		});
	}
});