jQuery下拉菜单图像更改

时间:2015-03-20 10:47:57

标签: javascript jquery html

我已经获得了一个下拉菜单来改变。我在html部分得到了这个:

<h1>Configure Your GT Super Sportscar</h1>
<form id = "sport" action="">
<table width = "35%" border = "2">
<tr><th colspan = "2">Choose a Colour</th></tr>
<tr><td>
<select id = "Colour" size = "5">
<option value='0'>Black</option>
<option value='1'>Blue</option>
<option value='2'>Red</option>
<option selected="selected" value='3'>Silver</option>
<option value='4'>White</option>
</select></td>
<td><img id = "carimage" src="images/silver.jpg" alt="Car model" ></td></tr>
</table>
</form>

我已经获得了5张不同颜色的汽车图片:

•   images/black.jpg
•   images/blue.jpg 
•   images/red.jpg 
•   images/silver.jpg 
•   images/white.jpg

当我点击下拉菜单中的红色选项时,汽车的图片或颜色需要更改,我不知道该怎么做。

请帮助。

1 个答案:

答案 0 :(得分:2)

你可以尝试这个:

$('#Colour option').click(function(){
    $('#carimage').attr('src','images/' + $(this).text().toLowerCase() + '.jpg');
})