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 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post

    show/hide divs using select

    Hi guys,

    another day, another problem I have a select:

    Code:
    <label for="tiers">Number of tiers</label>
    <select name="tiers" id="tiers" onchange="showtiers()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    So depending what the user will choose, I want to show below divs:

    Code:
                        	<div class="tier" id="tier_1" style="display:block">
                        	<label for="tier1">Tier 1</label>
                            <select name="item" id="tier1" onchange="recalculate(this)">
                            <option value="0">Please choose1</option>
                            </select>
                            </div>
                            
                            <div class="tier" id="tier_2" style="display:none">
                            <label for="tier2">Tier 2</label>
                            <select name="item" id="tier2" onchange="recalculate(this)">
                            <option value="0">Please choose2</option>
                            </select>
                            </div>
                            
                            <div class="tier" id="tier_3" style="display:none">
                            <label for="tier3">Tier 3</label>
                            <select name="item" id="tier3" onchange="recalculate(this)">
                            <option value="0">Please choose3</option>
                            </select>
                            </div>
                            
                            <div class="tier" id="tier_4" style="display:none">
                            <label for="tier4">Tier 4</label>
                            <select name="item" id="tier4" onchange="recalculate(this)">
                            <option value="0">Please choose4</option>
                            </select>
                            </div>
    As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head:

    Code:
    function showtiers() {
    var dropdownIndex = document.getElementById('tiers').selectedIndex;
    var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
    									
    if (dropdownValue == 2) { 
    									
    document.getElementById(tier_2).style.display = 'block';
    document.getElementById(tier_3).style.display = 'none';
    document.getElementById(tier_4).style.display = 'none';
    										
    }
    									
    if (dropdownValue == 3) { 
    									
    document.getElementById(tier_2).style.display = 'block';
    document.getElementById(tier_3).style.display = 'block';
    document.getElementById(tier_4).style.display = 'none';
    									
    }
    									
    if (dropdownValue == 4) { 
    									
    document.getElementById(tier_2).style.display = 'block';
    document.getElementById(tier_3).style.display = 'block';
    document.getElementById(tier_4).style.display = 'block';
    									
          }
    }
    If someone could point out what am I doing wrong I'd really appreciate it.
    Last edited by elem; 09-13-2011 at 07:45 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    everything like this:
    document.getElementById(tier_2)

    needs to be like this:
    document.getElementById('tier_2')

    you can also simplify the start by changing your onchange to:
    <select name="tiers" id="tiers" onchange="showtiers(value)">

    and the start of your function to:
    Code:
    function showtiers(value) {
    var dropdownValue = value;

  • Users who have thanked xelawho for this post:

    elem (09-15-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Just a quick "off the cuff".
    Ask more questions.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    
    <script type="text/javascript">
    function showtiers(el) {
     if(el.selectedIndex)
     document.getElementById("tier_"+el.selectedIndex).style.display = "block";
    }
    </script>
    <style type="text/css">
    div{display:none;}
    </style>
    </head>
    <body>
    <form action="" onsubmit="return false;"><p>
    <label for="tiers">Number of tiers</label>
    <select name="tiers" id="tiers" onchange="showtiers(this)">
    <option value="0">none</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <div class="tier" id="tier_1">
       <label for="tier1">Tier 1</label>
       <select name="item" id="tier1" onchange="recalculate(this)">
          <option value="0">Please choose1</option>
       </select>
    </div>
                            
    <div class="tier" id="tier_2">
       <label for="tier2">Tier 2</label>
       <select name="item" id="tier2" onchange="recalculate(this)">
           <option value="0">Please choose2</option>
       </select>
    </div>
                            
    <div class="tier" id="tier_3">
       <label for="tier3">Tier 3</label>
        <select name="item" id="tier3" onchange="recalculate(this)">
            <option value="0">Please choose3</option>
        </select>
    </div>
                            
    <div class="tier" id="tier_4">
        <label for="tier4">Tier 4</label>
        <select name="item" id="tier4" onchange="recalculate(this)">
            <option value="0">Please choose4</option>
         </select>
    <p></div>
    </form>
    </body>
    </html>
    Last edited by DaveyErwin; 09-13-2011 at 08:10 PM.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    thank you xelawho! that fixed the problem, all working now.

    Davey: your code doesn't work too good ... and what do you mean by saying "ask more questions" ? English is not my first language so I don't know what you meant by off the cuff either but i can feel the sarcasm in your reply

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by elem View Post
    Davey: your code doesn't work too good ... and what do you mean by saying "ask more questions" ? English is not my first language so I don't know what you meant by off the cuff either but i can feel the sarcasm in your reply
    Sorry,You are right the code is not good.
    Please forgive the apparent sarcasm,
    really none was intended. Here is some
    better code ....

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    
    <script type="text/javascript">
     showtiers = function (el) {
    	for(var i = 2;i<5;i++){
    	    document.getElementById("tier_"+i).style.display = "none"
    	}	
    	var a = el.options[el.selectedIndex].value;
         	while(a > 1){
    	document.getElementById("tier_"+a).style.display = "block";
    	a--;		
         }
    }
    </script>
    <style type="text/css">
    .tier{display:none;}
    </style>
    </head>
    <body>
    <form action="" onsubmit="return false;"><p>
    <label for="idtiers">Number of tiers</label>
    <select name="tiers" id="idtiers" onchange="showtiers(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <div class="tier" id="tier_1" style="display:block">
       <label for="tier1">Tier 1</label>
       <select name="item" id="tier1" onchange="recalculate(this)">
          <option value="0">Please choose1</option>
       </select>
    </div>
                            
    <div class="tier" id="tier_2">
       <label for="tier2">Tier 2</label>
       <select name="item" id="tier2" onchange="recalculate(this)">
           <option value="0">Please choose2</option>
       </select>
    </div>
                            
    <div class="tier" id="tier_3">
       <label for="tier3">Tier 3</label>
        <select name="item" id="tier3" onchange="recalculate(this)">
            <option value="0">Please choose3</option>
        </select>
    </div>
                            
    <div class="tier" id="tier_4">
        <label for="tier4">Tier 4</label>
        <select name="item" id="tier4" onchange="recalculate(this)">
            <option value="0">Please choose4</option>
         </select>
    <p></div>
    </form>
    </body>
    </html>
    I changed this part of your code ...


    Code:
    <label for="tiers">Number of tiers</label>
    <select name="tiers" id="tiers" onchange="showtiers()">
    because id must be unique.

    Again I apologize, and have a most pleasant day.
    Last edited by DaveyErwin; 09-15-2011 at 04:19 PM.

  • Users who have thanked DaveyErwin for this post:

    elem (09-15-2011)

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    35
    Thanks
    18
    Thanked 1 Time in 1 Post
    thanks Davey, really appreciate it


  •  

    Posting Permissions

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