选择不同的年份,显示不同的图片,如下图所示:
怎么实现?希望给一个例子
------最佳解决方案--------------------------------------------------------
<html>
<body>
<div>
<select name="year" id="year" onchange="change()">
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
</select>
</div>
<div>
<img id="image" src="D:/image/66.gif" alt="嘿嘿"></img>
</div>
</body>
<script>
function change(){
var year=document.getElementById('year').value;
alert(year);
var image=document.getElementById("image");
image.src="D:/image/"+year+".gif";
}
</script>
</html>
我这D盘的image文件下面有,33,44,55,66.gif,经过测试通过!
------其他解决方案--------------------------------------------------------
补充一下:
一个下拉菜单,可以选年份 2010年、2011年、2012年,选不同的年份
点击显示按钮,显示不同的图片;
2010年对应2010.jpg
2011年对应2011.jpg
2012年对应2012.jpg
显示图片的时候,不需要弹出新窗口,就在本页面显示。
网页打开时默认显示2012.jpg
请问怎么实现??
------其他解决方案--------------------------------------------------------
在线等,没人赐教么?
------其他解决方案--------------------------------------------------------
用js或者jquery
<body>
年<select>
<option value="2012.jpg">2010</option>
<option value="2011.jpg">2011</option>
<option value="2012.jpg">2012</option>
</select>
<input type="button" onclick="querySrcImg()"><br/>
<img id="image" width="200px" />
</body>
js:
<script type="text/javascript">
function querySrcImg(){
var srcImg document.getElementById("selYear").value;
document.getElementById("img").src = srcImg;
}
</script>
jquery
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
var srcImg = $("#selYear").val();
$.get("#img").src=srcImg;
});
})
</script>
------其他解决方案--------------------------------------------------------
随意写的有点错误,自己改一下.
------其他解决方案--------------------------------------------------------
谢谢 Mr_sunboy 。
------其他解决方案--------------------------------------------------------
非常感谢 xingfuzhuzi1314 !!!
试过可以。
------其他解决方案--------------------------------------------------------
楼主可以用纯jsp实现,如果设有查找按钮的话,数据从配置文件或DB中拉出来,缺点是每次者要刷新
------其他解决方案--------------------------------------------------------
我还想问一个问题,如果条件里面在加多一个月份
该怎么判断年月对应的图片?
------其他解决方案--------------------------------------------------------