ドロップダウンボックスの内容で絵が変わることをHTML+JQueryで実現

jquery を使用して、ドロップダウン ボックスの内容によって画像が変化することを認識します。

jqueryでは、まずバインドが必要なドロップダウンボックスのIDを取得し、次に置換が必要なピクチャIDとピクチャパスを取得し、入力の値を判断し、その値に応じて異なるピクチャを表示します

具体的な操作は以下の通り

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>

ここで、送信ボタンをクリックして変更を実現する必要があります

ドロップダウンボックスを選択したらすぐに変更する必要がある場合は、クリックイベントを削除してください