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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    US
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Use drop down box to change visibility?

    I have a question: how can you use a drop down box to show another drop down box? Here is my code below.
    Code:
    <html>
    	<head>
    <script type="text/javascript">
    "use strict";
    	function showlist()
    	{
    		var list=document.getElementById("id1");
    		var newlist=list.options[list.selectedIndex].value;
    		if (newlist==="Opt1")
    		{
    			document.getElementById("one").style.visibility="visible";
    			document.getElementById("two").style.visibility="hidden";
    		}
    		if (newlist==="Opt2")
    		{
    			document.getElementById("two").style.visibility="visible";
    			document.getElementById("one").style.visibility="hidden";
    		}
    	}
    </script>
    <style type="text/css">
    	select.a{visibility:hidden;}
    </style>
    	</head>
    	<body>
    <select id="chooseboxtoshow">
    	<option value="Opt1">Option 1</option>
    	<option value="Opt2">Option 2</option>
    </select><br />
    <select display="none" id="one" class="a">
    	<option value="1a">Option 1a</option>
    	<option value="1b">Option 2a</option>
    </select><br />
    <select display="none" id="two" class="a">
    	<option value="2a">Option 1b</option>
    	<option value="2b">Option 2b</option>
    </select><br />
    <input type="button" value="Show new list" onclick="showlist()">
    	</body>
    </html>
    Does anyone have ideas on how I can do it? Thanks!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,170
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    	function showlist() {
    		var listval=document.getElementById("chooseboxtoshow").value;
    		if (listval=="Opt1") {
    		document.getElementById("two").style.display="none";
                               document.getElementById("one").style.display="block";
    		}
    		if (listval=="Opt2") {
                               document.getElementById("one").style.display = "none";
    	              document.getElementById("two").style.display = "block";
    		}
    }
    </script>
    </head>
    <body>
    
    <select id="chooseboxtoshow">
    	<option value="Opt1">Option 1</option>
    	<option value="Opt2">Option 2</option>
    </select><br /><br />
    
    <div id = "one" style="display:none">
    <select id = "firstsel" class="a">
    	<option value="1a">Option 1a</option>
    	<option value="1b">Option 2a</option>
    </select>
    <br />
    </div>
    
    <div id = "two" style="display:none">
    <select id="secondsel" class="a">
    	<option value="2a">Option 1b</option>
    	<option value="2b">Option 2b</option>
    </select>
    <br />
    </div>
    <br><br>
    <input type="button" value="Show new list" onclick="showlist()">
    </body>
    </html>
    Rather than using a button you could invoke the script with <select id="chooseboxtoshow" onchange = "showlist()"> so long as you included a default or preliminary option <option value = "">Choose an option...</option> so the user's choice selection causes the change.


    Note that the value of an option is the string value (example: Opt1) you specify. The selectedIndex is a number representing the 0th, 1st, 2nd etc. option in the list.


    "Dives sum, si non redo eis quibus debeo. - I am a rich man as long as I do not pay my creditors"
    Last edited by Philip M; 04-01-2012 at 09:34 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    33
    Thanks
    6
    Thanked 1 Time in 1 Post
    Dont think you be able to do it with Select Drop down..

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,170
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Quote Originally Posted by dave_UK View Post
    Dont think you be able to do it with Select Drop down..


    What is that supposed to mean?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Mar 2012
    Location
    US
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot! Your code works very well!

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    33
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post


    What is that supposed to mean?
    I did read his question Wrong,

  • #7
    New Coder
    Join Date
    Mar 2012
    Location
    US
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Philip M, I used your solution to, in <select>, use onchange, but it doesn't seem to work. Any ideas why not? Here's the code.

    Code:
    <html>
    	<head>
    <script type="text/javascript">
    	function showlist() {
    		var listval=document.getElementById("chooseboxtoshow").value;
    		if (listval=="Opt1") 
    		{
    			document.getElementById("two").style.display="none";
    			document.getElementById("one").style.display="block";
    		}
    		if (listval=="Opt2") 
    		{
    			document.getElementById("one").style.display = "none";
    			document.getElementById("two").style.display = "block";
    		}
    		</script>
    	</head>
    	<body>
    <select id="chooseboxtoshow" onchange="showlist()">
    	<option>Choose option</option>
    	<option value="Opt1">Option 1</option>
    	<option value="Opt2">Option 2</option>
    </select><br />
    <div id="one" style="display:none">
    <select class="a">
    	<option value="1a">Option 1a</option>
    	<option value="1b">Option 2a</option>
    </select>
    </div>
    <div id="two" style="display:none">
    <select class="a">
    	<option value="2a">Option 1b</option>
    	<option value="2b">Option 2b</option>
    </select>
    </div>
    	</body>
    </html>

  • #8
    New Coder
    Join Date
    Mar 2012
    Location
    US
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code, your code with almost no variation, except to add onchange to the select, works like a charm.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    	function showlist()
    		{
    		var listval=document.getElementById("chooseboxtoshow").value;
    		document.getElementById("chooseboxtoshow").style.display="none";
    		if (listval=="Opt1") 
    			{
    				document.getElementById("two").style.display="none";
    				document.getElementById("one").style.display="block";
    			}
    			if (listval=="Opt2")
    			{
    				document.getElementById("one").style.display = "none";
    				document.getElementById("two").style.display = "block";
    			}
    		}
    </script>
    </head>
    <body>
    
    <select id="chooseboxtoshow" onchange="showlist()">
    	<option value="None">Choose an option</option>
    	<option value="Opt1">Option 1</option>
    	<option value="Opt2">Option 2</option>
    </select>
    <div id = "one" style="display:none">
    <select id = "firstsel" class="a">
    	<option value="1a">Option 1a</option>
    	<option value="1b">Option 2a</option>
    </select>
    </div>
    <div id = "two" style="display:none">
    <select id="secondsel" class="a">
    	<option value="2a">Option 1b</option>
    	<option value="2b">Option 2b</option>
    </select>
    </div>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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