Use drop down box to change visibility?

mjcox2000 · 04-01-2012, 05:50 PM

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!

Philip M · 04-01-2012, 09:22 PM

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"

dave_UK · 04-01-2012, 09:28 PM

Dont think you be able to do it with Select Drop down..

Philip M · 04-01-2012, 09:40 PM

Quote:

Originally Posted by dave_UK

Dont think you be able to do it with Select Drop down..

What is that supposed to mean?

mjcox2000 · 04-01-2012, 09:55 PM

Thanks a lot! Your code works very well!

dave_UK · 04-01-2012, 09:59 PM

Quote:

Originally Posted by Philip M

What is that supposed to mean?

I did read his question Wrong,

mjcox2000 · 04-01-2012, 10:17 PM

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>

mjcox2000 · 04-02-2012, 01:30 AM

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>