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
    May 2006
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Switch Content

    Hi,

    I've been driving myself crazy the past couple hours and can't figure this out. Here is what I need to do:

    Have a select box like this:

    Code:
    <select name="dropdown">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    </select>
    Then when one of those options is selected, the appropriate div tag is displayed:

    Code:
    <div id="option1">
    Div 1 Text
    </div>
    
    <div id="option2">
    Div 2 Text
    </div>
    This seems like it should be really simple to do, but I can't figure it out. Please help someone?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var num = 2; //this is number of content divs you have
    function showContent()
    {
    	for(var i = 1; i < num + 1; i++)
    	{
    		document.getElementById('option'+i).style.display = 'none';
    	}
    	if(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value != "none")
    	{
    		document.getElementById(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value).style.display = 'block';
    	}
    }
    onload = function()
    {
    	for(var j = 1; j < num + 1; j++)
    	{
    		document.getElementById('option' + j).style.display = 'none';
    	}
    }
    </script>
    </head>
    
    <body>
    <form>
    <select name="dropdown" onchange="showContent()">
    <option value="none">Choose content</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    </select>
    </form>
    <div id="option1">Div 1 Text</div>
    
    <div id="option2">Div 2 Text</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! Is there a way to display the content of the first div when the page loads?

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Remove the following reference from the stylesheet:

    #option1 {display:hidden;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by felgall
    Remove the following reference from the stylesheet:

    #option1 {display:hidden;}
    There is no stylesheet. The display of the divs is handled by JS just in case a user has JS disabled, they still see content.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var num = 2; //this is number of content divs you have
    function showContent()
    {
    	for(var i = 1; i < num + 1; i++)
    	{
    		document.getElementById('option'+i).style.display = 'none';
    	}
    	if(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value != "none")
    	{
    		document.getElementById(document.forms[0].dropdown.options[document.forms[0].dropdown.options.selectedIndex].value).style.display = 'block';
    	}
    }
    onload = function()
    {
    	for(var j = 1; j < num + 1; j++)
    	{
    		document.getElementById('option' + j).style.display = 'none';
    	}
    	document.getElementById('option1').style.display = 'block';
    }
    </script>
    </head>
    
    <body>
    <form>
    <select name="dropdown" onchange="showContent()">
    <option value="none">Choose content</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    </select>
    </form>
    <div id="option1">Div 1 Text</div>
    
    <div id="option2">Div 2 Text</div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    So change the javascript to remove the same code. Change the first line

    for(var i = 1; i < num + 1; i++)

    to read

    for(var i = 2; i < num + 1; i++)
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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