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>
展开
 我来答
百度网友6287e8b2d
2010-06-03 · TA获得超过358个赞
知道答主
回答量:215
采纳率:0%
帮助的人:200万
展开全部
不用那么麻烦,改成我写的:初始化隐藏用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%
帮助的人:634万
展开全部
<script language="javascript" type="text/javascript">
//加载时先隐藏图片

function getStyle(strName)
{
return document.getElementById(strName).style;
}
var
pc1=getStyle("divImg1"),
pc2=getStyle("divImg2"),
pc3=getStyle("divImg3"),
pc4=getStyle("divImg4");

function showPc(i)
{
pc1.display="none";
pc2.display="none";
pc3.display="none";
pc4.display="none";
swtch(i)
{
case 0:
pc1.display="block";
break;
case 1:
pc2.display="block";
break;
case 2:
pc3.display="block";
break;
case 3:
pc4.display="block";
break;
case 4:
break;
}
}
</script>

<body onload="showPc(4)">

<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="showPc(this.selectedIndex)">

<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
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%
帮助的人:406万
展开全部
以下仅供参考:
<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)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式