HTML+JQuery实现图片随着下拉框内容的改变而改变

使用jquery实现图片随着下拉框内容的改变而改变

在jquery里面先获取需要绑定的下拉框的id，再获取图片id以及需要替换上的图片路径，然后判断input的值，根据它的值显示不同的图片

具体操作如下

1、首先调用jQuery库

<script src="js/jquery-1.7.js"></script>

2、jquery部分

		<script>
			$(document).ready(function(){			
				$("#submit").click(function(){//单击事件
				var value = $("#area").attr("value");//获取input下拉框的id
				
				if(value == "轿车")//判断下拉框的值	
				{
					$("#showme").attr("src","img/Jiaoche.png");//获取图片id,替换此条件下的图片
					$("#01").html("<b>"+"轿车"+"</b>");//获取p标签的id,替换内容
					$("#02").html("<b>"+"¥210.68万起*"+"</b>");// innerHTML是指某个网页元素内部的代码,而innerTEXT是指某个网页元素的文本内容
					$("#03").html("<b>"+"¥34,852起*"+"</b>");//此处使用.html可以在jquery里面直接拼接加入标签
				  
				}
				if(value == "SUV")//有几个选项就加几个判断
				{
					 $("#showme").attr("src","img/SUV.png");
					$("#01").html("<b>"+"SUV"+"</b>");
					$("#02").html("<b>"+"¥160.68万起*"+"</b>");
					$("#03").html("<b>"+"¥21,852起*"+"</b>");
				}
				if(value == "轿跑车&敞篷跑车")
				{
					$("#showme").attr("src","img/C940_GT-R.png");
					$("#01").html("<b>"+"跑车"+"</b>");
					$("#02").html("<b>"+"¥300.68万起*"+"</b>");
					$("#03").html("<b>"+"¥50,852起*"+"</b>");
				}
				if(value == "MPV")
				{
					$("#showme").attr("src","img/MPV.png");
					$("#01").html("<b>"+"MPV"+"</b>");
					$("#02").html("<b>"+"¥450.68万起*"+"</b>");
					$("#03").html("<b>"+"¥60,852起*"+"</b>");
				}
			})		
		})
		</script>

3、html部分

<select id="area" style="width: 100%; height: 30px; font-size: large;"></select>//下拉框
<input type="submit" value="确定" id="submit" />
<div>
	<div id="img">
		<img id="showme" src="img/Jiaoche.png" width="540px" height="240px" />//图片位置
			<div style="width: 540px;height: 60px;">
				  <table class="money">
					<tr>
					    <td>您选择的座驾</td>
						<td>厂商建议零售价</td>
						<td>月供</td>
					</tr>
					<tr>
						<td id="01"><b>轿车</b></td>
						<td id="02"><b>¥210.68万起*</b></td>
						<td id="03"><b>¥34,852起*</b></td>
					</tr>
				</table>
			</div>
	</div>
</div>

此处需要点击submit按钮才能实现变化

如果需要刚选择下拉框就改变，则去掉click事件即可