Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Span tag text using dropdown select

    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>
    Last edited by VIPStephan; 11-11-2012 at 10:10 PM. Reason: added closing code BB tag

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the solution and the tip about the tool bar

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanx for the post and the help ...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •