Question

如何在Javascript中能够动态根据下拉列表的选项变化，更新图片的显示 ？

就是在下拉列表中点击图片一、图片二、图片三等选项，右边图框中相应地会出现不同的图片。例如1.pig,2.pig,3.pig 。帮帮忙啊！要能实现哦！

Answer 1

<select onchange="document.getElementById('picshow').innerHTML='<img src='+this.value+'.jpg>';">
<option value="">请选择</option>
<option value="1">1.jpg</option>
<option value="2">2.jpg</option>
</select>

<div id="picshow"></div>

Answer 2

参考如下代码：

<form>
<select name="test" onchange="testimg(this)">
<option value="1" selected="selected">图片1</option>
<option value="2">图片2</option>
<option value="3">图片3</option>
<option value="4">图片4</option>
</select>
</form>
<img id="imgshow" src="1.png" />

<script type="text/javascript">
function getname(it){
var length = it.options.length - 1;
for(var i = length; i >= 0; i--){
if(it.options[i].selected == true){
return it.options[i].value;
}
}
}
function testimg(thisselect){
document.getElementById("imgshow").src=getname(thisselect)+".png";
}
</script>