Если сходу, то я бы сделал примерно так (при желании можно легко добавить третий селект, четвертый, ..., сотый):
<!DOCTYPE html>
<img id="hat-image" />
<select id="hat-select">
<option selected="selected" value="http://javascript.ru/forum/images/smilies/smile.gif">Шапка 1</option>
<option value="http://javascript.ru/forum/images/smilies/mad.gif">Шапка 2</option>
<option value="http://javascript.ru/forum/images/smilies/laugh.gif">Шапка 3</option>
</select>
<img id="scarf-image" />
<select id="scarf-select">
<option selected="selected" value="http://javascript.ru/forum/images/smilies/yes4.gif">Синий шарф</option>
<option value="http://javascript.ru/forum/images/smilies/agree.gif">Черный "Звездочка"</option>
</select>
<script>
(function(){
var selects = ['hat', 'scarf'];
for (var i = 0; i < selects.length; i++) {
var select = document.getElementById(selects[i] + '-select');
var image = document.getElementById(selects[i] + '-image');
bind(select, image);
preload(select);
}
function bind(select, image) {
select.onchange = function() {
image.src = this.value;
};
select.onchange();
}
function preload(options) {
for (var i = 0; i < options.length; i++) {
new Image().src = options.value;
}
}
})()
</script>