View Full Version : Passing Multiple Value with onChange

01-12-2004, 01: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!

<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];

<body onLoad="setTimeout('bancycle()', 3000)">
<img src="../images/banner1.gif" name="Banner" width="750" height="75 ">
<h2>Welcome to Olde World Antiques! To view some of our current High Value Items, select from the following...</h2>
<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
<td align="center">
<img name="previewpic" src="../images/dresser.jpg" width=100 height=125 border=0>
<input type="text" name="op1" value="Dresser">

01-12-2004, 07: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;

<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>
<img name="previewpic" src="../images/dresser.jpg" width="100" height="125" border="0" />
<input type="text" name="op1" value="Dresser" />

01-12-2004, 11:24 PM
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!! :)