CodingForums.com - View Single Post - Change Span tag text using dropdown select

emembee · 11-10-2012, 06:58 PM

I am working on a jewelry page for a gift shop website and would like
to use drop down boxes to select an item size or color and have the
price text in a paragraph or span tag change depending on the selection.
I got it to work (sort of) in one drop down box but not in a second using a
mishmash of javascript and css from an old classroom example. Can someone suggest a better solution?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>

<style type="text/javascript">




			#one {visibility:visible;}/* top:100px;left:100px;position:absolute;}*/
			#two {visibility:hidden;} /*top:100px;left:100px;position:absolute;}*/
			#three {visibility:hidden;} /*top:100px;left:100px;position:absolute;}*/
		</style>
		
<style type="text/css">
.parPrice {
	font-weight: bold;
	width: 20px;
	text-align: right;
	padding-right: 2px;
	padding-left: 2px;
	display: inline;
	position: absolute;
	top: 5px;
	left: 250px;
}

#one {
	visibility: visible;
}
#two {
	visibility: hidden;
}
#three {
	visibility: hidden;
}

.dropdown {
	top: 5px;
	position: absolute;
	width: 300px;
}

.selectsize {
	position: absolute;
	width: 300px;
	height: 30px;
}

</style>
</head>

<body>

 
<div class="selectsize">
<p class="dropdown">
<select name="Select1" style="width: 201px">
				<option onclick="document.getElementById('one').style.visibility='visible';
								 document.getElementById('two').style.visibility='hidden';
			  				   	 document.getElementById('three').style.visibility='hidden';">
				Sterling Silver</option>
				<option onclick="document.getElementById('two').style.visibility='visible';
								 document.getElementById('one').style.visibility='hidden';
				     			 document.getElementById('three').style.visibility='hidden';">
				14k Gold Plate</option>
				<!--<option onclick="document.getElementById('three').style.visibility='visible';document.getElementById('two').style.visibility='hidden';document.getElementById('one').style.visibility='hidden';">Hingham Harbor  Earrings Sterling</option>-->

				<!--<option>Light Compass Pendant Sterling Small</option>
				<option>Light Compass Pendant Sterling Large</option>
				<option>Light Compass Pendant 14K Gold Plate Small</option>
				<option>Light Compass Pendant 14K Gold Plate Large</option>-->
			</select>&nbsp;&nbsp;&nbsp;&nbsp;
</p>

<p id="one" class="parPrice" style="width: 42px">$29.00</p>
<p id="two" class="parPrice" style="width: 42px">$39.00</p>
<!--<p id="three" class="parPrice" style="width: 42px">$49.00</p>-->

</div>
<br/>
<br/>
<br/>
<br/>
<div class="selectsize">
<p style="width: 239px; height: 30px">

<select name="Select2" style="width: 161px">
				<option onclick="document.getElementById('one').style.visibility='visible';
								document.getElementById('two').style.visibility='hidden';
								document.getElementById('three').style.visibility='hidden';">
								Sterling Silver-Small</option> 
				<option onclick="document.getElementById('two').style.visibility='visible';	
								document.getElementById('one').style.visibility='hidden';
								document.getElementById('three').style.visibility='hidden';"> 
								Sterling Silver-Large</option>
				<option onclick="document.getElementById('two').style.visibility='visible';
								document.getElementById('one').style.visibility='hidden';
								document.getElementById('three').style.visibility='hidden';">
								14K Gold Plate-Small</option>
				<option onclick="document.getElementById('three').style.visibility='visible';
								document.getElementById('two').style.visibility='hidden';
								document.getElementById('one').style.visibility='hidden';">
								14K Gold Plate-Large</option>
				
			</select>&nbsp;&nbsp;&nbsp;&nbsp;
			<span id ="one" class="spanprice">$29.00</span>
			<span id ="two" class="spanprice">$39.00</span>
			<span id ="three" class="spanprice">$49.00</span>
</p>

</div>

</body>

</html>