Need help modifying this script to work with multiple <select> fields

[mopacfan]

This is my code:

	<SCRIPT LANGUAGE="JavaScript" type='text/javascript'>
		<!--
		function showimagenow(){
		//	alert(document.addproduct.catimage.options[document.addproduct.catimage.selectedIndex].value)
		//	if (!document.images);
		//	return
			document.images.img1.src="images/catbanners/" +
			document.addproduct.catimage.options[document.addproduct.catimage.selectedIndex].value;
		}

		//-->
	</script>
<select size='1' name='catimage' onChange="showimagenow()">
<option value='cat.jpg'>Cat</option>
<option value='dog.jpg'>Dog</option>
<option value='horse.jpg'>Horse</option>
</select>
<br /><br />
<img name='img1' src='startingimage.jpg'>
<br /><br />

On this page, I have six drop downs and I don't want to copy and paste the javascript six times to handle each field name. I know that there is some way to modify this script so that it works with and select field that calls it. I don't know if it's the getElementbyID or if the onChange="showimagenow()" should be something like onChange="showimagenow(image1)"

Any help will be greatly appreciated.

Thanks

 

[Ascalonian]

Give this a try...

On the select, make the onchange:

onchange="showImageNow(this)"

and inside the function do

function showImageNow(inSelect) {
    document.images.img1.src="images/catbanners/" +
    inSelect.options[inSelect.selectedIndex].value;
}

 

[mopacfan]

Wow, that's short and simple. That looks great. I now receive a message "showimagenow is not defined" in the error console in firefox. What does that mean?

 

[mopacfan]

I finally figured it out:

	function showimagenow(imgId){
		var ddList = "dd" + imgId;
		var imgSrc = "img" + imgId;
		document.getElementById(imgSrc).src =" images/prodthumbs/" +
		document.getElementById(ddList).options[document.getElementById(ddList).selectedIndex].value;
	}

Thanks for the help.