jQuery:<Select> 表单帮助

Question

这是我所拥有的:

<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>

可在此处查看:http://jsfiddle.net/A5VEv/1/

我想向脚本添加功能，以便当用户选择一个选项时 - 与该选项关联的默认图像会发生变化。

例如:

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

那么如何更改代码，以便当用户选择“blue Barrel”时，默认图像更改为 bluebarrel.jpg？

此外，希望感谢http://jsfiddle.net/mekwall/TJcP4/1/原始选择菜单代码。

Answer 1

您需要有某种方法将选择选项值映射到图像名称。如果您说图像名称始终是所选选项的小写值，并且始终是 jpeg，您可以轻松做到:

$('#defaultImage img').attr('src', dermal.val().toLowerCase() + '.jpg');

如果图像不符合该模式，您可能需要做一些其他工作才能映射图像。祝你好运。