CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)
-   -   Change Span tag text using dropdown select (http://www.codingforums.com/showthread.php?t=281832)

emembee 11-10-2012 06:58 PM
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>

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 ...


All times are GMT +1. The time now is 12:21 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.