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');

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

Answer 2

更改图像的最快方法是使用一些jquery，沿着

行

$('#defaultImage img').attr('src', 'newImageLocation.jpg')

Answer 3

您没有指定如何获取图像的名称，但假设它将是option后跟.png的值，您可以按照此小提琴所示进行操作： http://jsfiddle.net/nogoodatcoding/A5VEv/4/

这背后的jQuery线就是：

$('#defaultImage img').attr('src', barrel.val() + '.png');

另请注意，您可以简化代码以将当前选定的选项仅用于：

barrel = $('#barrelSelect :selected'),
slide = $('#slideSelect :selected');

Answer 4

将您的图片命名为“optionValue.jpg”，然后执行以下操作：

$(document).ready(function() {
  $('#barrelSelect').change(function(){
    $('#barrelImage').attr('src', 'path/to/' + $(this).val() + '.jpg');
  });
});

其中#barrelImg是你的桶的img标签

jQuery：帮助<select>表单</select>

4 个答案: