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事件即可