jQuery: Help with <Select> Form -

here's have:

<select id="barrelselect"> <option value="barreldefaultoption">-- choose --</option>  <option value="blackbarrel" rel="10">black barrel</option>  <option value="bluebarrel" rel="25">blue barrel</option>  <option value="greenbarrel" rel="30">green barrel</option> </select> <select id="slideselect"> <option value="slidedefaultoption">-- choose --</option>  <option value="blueslide" rel="15">blue slide</option>  <option value="blackslide" rel="45">black slide</option>  <option value="greenslide" rel="50">green slide</option> </select> <p>$ <span id="output"></span> </p>  <script> function onselectchange(){ var total = 0,     barrel = $("#barrelselect").find('option:selected'),     slide = $("#slideselect").find('option:selected');  if(value = barrel.attr('rel')){     total += parseint(value); }  if(value = slide.attr('rel')){     total += parseint(value); }  $("#output").html(total);   }  $("#barrelselect").change(onselectchange); $("#slideselect").change(onselectchange); </script> 

viewable here: http://jsfiddle.net/a5vev/1/

i'd add functionality script when user chooses option - default image associated option changes.

for example:

 <div id="defaultimage"><img src="default.jpg" /></div> 

so how can alter code when user selects "blue barrel", default image changes bluebarrel.jpg?

also, want give credit http://jsfiddle.net/mekwall/tjcp4/1/ original select menu code.

you need have way map select option values image names. if image names lower case value of selected option, , jpeg do:

$('#defaultimage img').attr('src', dermal.val().tolowercase() + '.jpg'); 

you might have other work in order map images if don't fit pattern. luck.