Javascript中，当点击下拉菜单中的value值时，显示对应的图片的代码怎么写？

我只写出来了只有少数图片才可以用的，但如果图片多了我写的那种就很麻烦了，我想知道图片多的时候该怎么做。我写的如下：<scriptlanguage="javascript"... 我只写出来了只有少数图片才可以用的，但如果图片多了我写的那种就很麻烦了，我想知道图片多的时候该怎么做。我写的如下：
<script language="javascript" type="text/javascript">
//加载时先隐藏图片
function Load(){
document.getElementById("divImg1").style.display="none";
document.getElementById("divImg2").style.display="none";
document.getElementById("divImg3").style.display="none";
document.getElementById("divImg4").style.display="none";
}
//显示图片的函数
function changePic(){
var name=document.form.Name.value;
var pic1=document.getElementById("divImg1");
var pic2=document.getElementById("divImg2");
var pic3=document.getElementById("divImg3");
var pic4=document.getElementById("divImg4");
if(name=="我......"){
pic1.style.display="block";
pic2.style.display="none";
pic3.style.display="none";
pic4.style.display="none";
}
else if(name=="你......"){
pic1.style.display="none";
pic2.style.display="block";
pic3.style.display="none";
pic4.style.display="none";
}
else if(name=="她......"){
pic1.style.display="none";
pic2.style.display="none";
pic3.style.display="block";
pic4.style.display="none";
}
else if(name=="他......"){
pic1.style.display="none";
pic2.style.display="none";
pic3.style.display="none";
pic4.style.display="block";
}
else{
pic1.style.display="none";
pic2.style.display="none";
pic3.style.display="none";
pic4.style.display="none";
}
}
</script>
<body onload="Load()">
<form action="" method="post" name="form" id="form">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr style="font-size:24px; color:#0000FF " align="center"><td>精美人物图片选择</td></tr>
<tr style="font-size:12px; color:#FF0099; width:263" align="center" ><td>你要选择一张图片喔
<select id="selName" name="Name" onchange="changePic()">
<option >--选择人物</option>
<option value="我......">我......</option>
<option value="你......">你......</option>
<option value="她......">她......</option>
<option value="他......">他......</option>
</select></td></tr>
<tr><td>
<div id="divImg1" style="width:260; height:183" align="center"><img src="file:///E|/图片、/HebeOne.jpg" width="199" height="148" /></div>
<div id="divImg2" style="width:260; height:183" align="center"><img src="file:///E|/图片、/未命名.jpg" width="254" height="177" /></div>
<div id="divImg3" style="width:260; height:183" align="center"><img src="file:///E|/图片、/孝甄.jpg" width="250" height="176" /></div>
<div id="divImg4" style="width:260; height:183" align="center"><img src="file:///E|/图片、/hebe.jpg" width="194" height="138" /></div>
</td></tr>
</table>
</form> 展开

 我来答

4个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

百度网友6287e8b2d
2010-06-03 · TA获得超过358个赞

知道答主

回答量：215

采纳率：0%

帮助的人：199万

我也去答题访问个人页

关注

展开全部

不用那么麻烦，改成我写的：初始化隐藏用CSS，选择图片用函数，这样你可以任意增加图片

<style type="text/css">
.yincang{ width:260; height:183; align:center;display:none;}
</style>
<script type="text/javascript">
function change(){
var name=document.form.Name.value;
var divs=document.getElementsByTagName("div");
var selName=document.getElementById("selName");
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
if(selName.selectedIndex!=0){
divs[selName.selectedIndex-1].style.display="block";
}
}
</script>
<body>
<form action="" method="post" name="form" id="form">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr style="font-size:24px; color:#0000FF " align="center"><td>精美人物图片选择</td></tr>
<tr style="font-size:12px; color:#FF0099; width:263" align="center" ><td>你要选择一张图片喔
<select id="selName" name="Name" onchange="change()">
<option >--选择人物</option>
<option value="我......">我......</option>
<option value="你......">你......</option>
<option value="她......">她......</option>
<option value="他......">他......</option>
</select></td></tr>
<tr><td>
<div id="divImg1" class="yincang" ><img src="images/thumb/3.jpg" width="199" height="148" /></div>
<div id="divImg2" class="yincang" ><img src="images/thumb/9.jpg" width="254" height="177" /></div>
<div id="divImg3" class="yincang" ><img src="images/thumb/12.jpg" width="250" height="176" /></div>
<div id="divImg4" class="yincang" ><img src="images/thumb/8.jpg" width="194" height="138" /></div>
</td></tr>
</table>
</form>
</body>

已赞过 已踩过<

评论收起

skyfukk
2010-06-03 · TA获得超过1187个赞

知道小有建树答主

回答量：966

采纳率：100%

帮助的人：632万

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

jenny扬
2010-06-02 · 超过12用户采纳过TA的回答

知道答主

回答量：45

采纳率：0%

帮助的人：30.3万

我也去答题访问个人页

关注

展开全部

我一般都是
<select id="selName" name="Name" onchange="changePic(this)">
<option >--选择人物</option>
<option value="divImg1">我......</option>
<option value="divImg2">你......</option>
<option value="divImg3">她......</option>
<option value="divImg4">他......</option>
</select>
------------------------------------------------------
function changePic(img){
Load();
document.getElementById(img).style.display="block";
}
------------------------------------------------------
只是我的做法。供你参考看看。

已赞过 已踩过<

评论收起

Passer_MWorld
2010-06-03 · TA获得超过424个赞

知道小有建树答主

回答量：369

采纳率：0%

帮助的人：405万

我也去答题访问个人页

关注

展开全部

以下仅供参考：
<script>
x=['','我....','你....','他....','她....']
f=['','pic1.jpg','xas.jpg','ca.jpg','dvs.jpg']
for(q='<center><select id=X onchange="z.src=f[selectedIndex]">',i=1;i<x.length;i++){
q+='<option>'+x[i]+'</option>'
}document.write(q+'</select><br><img s\
rc="a0.jpg" width=400 height=300 id=z></center>')
</script>

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

Javascript中，当点击下拉菜单中的value值时，显示对应的图片的代码怎么写？

其他类似问题

为你推荐：