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>

sunfighter · 11-11-2012, 04:45 PM

Welcome to the forums emembee,
When your in the message box writing your post You will see a tool bar above you. Use the hash mark (the #) to get the code tags to put your code into.

Here's my version of your answer. Any questions just ask:

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/css">
#selectsize
{
  width:900px
}
</style>
</head>

<body>
<div id="selectsize">
	<select id="Select1" onchange="selone();">
		<option value="">Band Material</option>
		<option value="Silver">Sterling Silver</option>
		<option value="Gold">14k Gold Plate</option>
	</select>&nbsp;&nbsp;&nbsp;&nbsp;

	<select id="Select2" onchange="selone();">
		<option value="">Ring Size</option>
		<option value="Small">Small</option>
		<option value="Large">Large</option>
	</select>&nbsp;&nbsp;&nbsp;&nbsp;
<span id="price">Pick the Band Material</span>
</div>

<script type="text/javascript">
function selone()
{
  var band = document.getElementById('Select1').value;
  var size = document.getElementById('Select2').value;

  if(size == "")
    document.getElementById('price').innerHTML = "Now Select the Size";
  if(band == "")
    document.getElementById('price').innerHTML = "Now Select the Band Material";

 if(band == "Gold")
 {
  if(size == "Small") document.getElementById('price').innerHTML = "Cost of small gold";
  if(size == "Large") document.getElementById('price').innerHTML = "Cost of large gold";

 }

  if(band == "Silver")
  {
    if(size == "Small") document.getElementById('price').innerHTML = "Cost of small silver";
    if(size == "Large") document.getElementById('price').innerHTML = "Cost of large silver";
  }
}
</script>
</body>
</html>

emembee · 11-11-2012, 10:00 PM

Thanks for the solution and the tip about the tool bar

arcookies · 12-03-2012, 03:39 AM

thanx for the post and the help ...