...

View Full Version : Passing Multiple Value with onChange



tcade@fuse.net
01-12-2004, 02:22 AM
I am trying to create a very simple page that uses a drop down menu to display an image and a text description. Any help would be greatly appreciated!

<html>
<head>
<title>Olde World Antiques</title>
<script language="javascript">
<!-- Hide from old browsers
var banners = new
Array("../images/banner1.gif", "../images/banner2.gif", "../images/banner3.gif")
var bnrCntr = 0
function bancycle() {
bnrCntr = bnrCntr + 1
if (bnrCntr == 3) {
bnrCntr = 0
}
document.Banner.src = banners[bnrCntr]
setTimeout("bancycle()", 3000)
}
function previewPic(sel) {

mylabel = new Array("../images/dresser.jpg", "../images/lg_dresser.jpg", "../images/bowl.jpg");
myvalue = new Array("Dresser", "Large Dresser", "Bowl");

document.previewpic.src = mylabel[sel.selectedIndex];
document.op1.value = "";
document.op1.value = myvalue[sel.selectedIndex];

}
//-->
</script>
</head>
<body onLoad="setTimeout('bancycle()', 3000)">
<img src="../images/banner1.gif" name="Banner" width="750" height="75 ">
<center>
<h2>Welcome to Olde World Antiques! To view some of our current High Value Items, select from the following...</h2>
<table>
<form>
<tr>
<td align="center">
<select name=items size=1 onChange="previewPic(this)">
<option myvalue="Dresser" mylabel="../images/dresser.jpg" selected >Dresser
<option myvalue="Large Dresser" mylabel="../images/lg_dresser.jpg">Large Dresser
<option myvalue="Bowl" mylabel="../images/bowl.jpg">Bowl
</select>
</td>
</tr>
<tr>
<td align="center">
<img name="previewpic" src="../images/dresser.jpg" width=100 height=125 border=0>
</td>
</tr>
<tr>
<td>
<input type="text" name="op1" value="Dresser">
</td>
</tr>
</form>
</table>
</center>
</body>
</html>

glenngv
01-12-2004, 08:13 AM
You didn't describe your problem.
But here's the fix, anyway.


function previewPic(sel) {
var idx = sel.selectedIndex;
document.images['previewpic'].src = sel.options[idx].value;
document.myform.op1.value = sel.options[idx].text;
}

html:
<form name="myform">
<select name="items" size="1" onchange="previewPic(this)">
<option value="../images/dresser.jpg" selected>Dresser</option>
<option value="../images/lg_dresser.jpg">Large Dresser</option>
<option value="../images/bowl.jpg">Bowl</option>
</select>
...
<img name="previewpic" src="../images/dresser.jpg" width="100" height="125" border="0" />
...
<input type="text" name="op1" value="Dresser" />
...
</form>

tcade@fuse.net
01-13-2004, 12:24 AM
Thanks Glenn. After I posted, I realized that I didn't describe the problem.

It's nice to have a forum like this for new programmers!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum