You can do it in different ways. I will propose mine using data attributes to store src
values. Consider this code.
HTML:
<img id="imageToSwap" src="http://lorempixel.com/100/100/nature/4">
<ul class="select">
<li class="option active" data-value="http://lorempixel.com/100/100/nature/4">Red</li>
<li class="option" data-value="http://lorempixel.com/100/100/nature/1">Green</li>
<li class="option" data-value="http://lorempixel.com/100/100/nature/2">Yellow</li>
</ul>
and JS:
var $image = $('#imageToSwap');
$('.select').on('click', '.option', function() {
$image.prop('src', $(this).data('value'));
$(this).addClass('active').siblings().removeClass('active');
});
Demo: http://jsfiddle.net/8f669/
UPD Support multiple selects
var $image = $('#imageToSwap');
var $selects = $('.select').on('click', '.option', function() {
$(this).addClass('active').siblings().removeClass('active');
var src = 'http://lorempixel.com/{size}/{size}/{group}/{image}';
$selects.each(function() {
src = src.replace(RegExp('\\{' + $(this).data('name') + '\\}', 'g'), $(this).find('.active').data('value'));
});
$image.prop('src', src);
});
Note how src is constructed. 'http://lorempixel.com/{size}/{size}/{group}/{image}'
. It has tokens corresponding to select lists. It brings maximal flexibility. You jsut add new select list with proper data-name="xxx"
attribute, and here we go, you can use token {xxx}
in src url.