Dynamic drop down menus?

[Davic]

I was wondering how I would go about creating dynamic drop down menus, so if the user selects a option one (with pre assigned values) then a list linked with that appears in the next drop down and this will countiue with the next selection.

I am not really sure where to start as I have never done this sort of thing before so please post surgestions, tutorials, code snippites etc, all help is appreciated.

Thanks

 

[Albino]

Im not sure what you mean by dynamic, but this may help you :

http://www.alistapart.com/articles/horizdropdowns/

 

[Davic]

No that is for a menu I mean in a from.

So for example car insurance, in the first drop dwon box it has different makes of cars, when you chosse a make you the second drop down box (bellow it) is populated with diffent cars made by the make you selected and this countines etc

 

[PoorDoggie]

if you know php you could do it this way:

<select name="manufacturer" onChange="location.href='<?php echo $SERVER['PHP_SELF']; ?>?manufacturer='.this.value;">
etc...
</select>

and then use $_GET['manufacturer'] to check for the use of the select box, and then produce another one with the correct details in.

 

[Dan]

<style type="text/css">
select { display: none; }
select.first { display: block; }
</style>

<form name="form" action="" method="post">
<div id="first">
	First Item: 
	<select name="first" class="first" onchange="load('second', this.value);">
		<option value="foods" />Foods 
		<option value="animals" />Animals
	</select>
</div>
<div id="second" style="display: none;">
	Second Item: 
	<select name="foods" onchange="load('third', this.value);">
		<option value="pizza" />Pizza
		<option value="hamburger" />Hamburger
	</select>
	<select name="animals" onchange="load('third', this.value);">
		<option value="kangaroo" />Kangaroo
		<option value="giraffe" />Giraffe
	</select>
</div>
<div id="third" style="display: none;" onchange="load('submit', '');">
	Third Item: 
	<select name="pizza">
		<option value="pepperoni" />Pepperoni
		<option value="cheese" />Cheese
	</select>
	<select name="hamburger">
		<option value="nocheese" />No Cheese
		<option value="cheese" />Cheese
	</select>
	<select name="kangaroo">
		<option value="fat" />Fat
		<option value="purple" />Purple
	</select>	
	<select name="giraffe">
		<option value="tall" />Tall
		<option value="smelly" />Smelly
	</select>
</div>
<div id="submit" style="display: none;">
	<input type="submit" value="Submit" />
</div>
</form>

<script type="text/javascript">
function load(id, show) {
	var divid = document.getElementById(id);
	divid.style.display = 'block';
	if (show != '') {
		var selects = divid.getElementsByTagName('select');
		for (var i = 0; i < selects.length; i++) {
			selects[i].style.display = 'none';
			if (selects[i].name == show) {
				selects[i].style.display = 'block';
			}
		}
	}
}
</script>

The name of the next select box needs to be the value of the one before it. You can have select's with the same name as long as they are in different DIV id's.
(The main parent DIV- <div id="first"><div id="hi"><select name="something"> is still inside "first")

Also, you can see the number of select boxes increases exponentially (probably more if you have more than two options per select), so I don't know if this is the best way to make this. I just made this fast for you.

There is somewhat of a bug starting with the third level of selects. If you change the first one after you've gotten to the third, the second select will be correct, but the third won't be. Test it to see what I mean if you don't understand that.

 

[Davic]

WOW thanks for that dan that is a very nice script like I wanted is their any way that you could get all the select oxes to appear but just not be populated like http://www.drive.com.au/

PoorDoggie yes I do know som php so I may try that way to and see which way is the best.

 

[Dan]

<style type="text/css">
select { display: none; width: 150px; }
select.first { display: block; }
</style>

<form name="form" action="" method="post">
<div id="first">
	First Item: 
	<select name="first" class="first" onchange="load('second', this.value);">
		<option value="foods" />Foods 
		<option value="animals" />Animals
	</select>
</div>
<div id="second">
	Second Item: <select name="second" class="first"><option value="" /> </select>
	<select name="foods" onchange="load('third', this.value);">
		<option value="pizza" />Pizza
		<option value="hamburger" />Hamburger
	</select>
	<select name="animals" onchange="load('third', this.value);">
		<option value="kangaroo" />Kangaroo
		<option value="giraffe" />Giraffe
	</select>
</div>
<div id="third">
	Third Item: <select name="second" class="first"><option value="" /> </select>
	<select name="pizza" onchange="load('submit', '');">
		<option value="pepperoni" />Pepperoni
		<option value="cheese" />Cheese
	</select>
	<select name="hamburger" onchange="load('submit', '');">
		<option value="nocheese" />No Cheese
		<option value="cheese" />Cheese
	</select>
	<select name="kangaroo" onchange="load('submit', '');">
		<option value="fat" />Fat
		<option value="purple" />Purple
	</select>	
	<select name="giraffe" onchange="load('submit', '');">
		<option value="tall" />Tall
		<option value="smelly" />Smelly
	</select>
</div>
<div id="submit" style="display: none;">
	<input type="submit" value="Submit" />
</div>
</form>

<script type="text/javascript">
function load(id, show) {
	var divid = document.getElementById(id);
	divid.style.display = 'block';
	if (show != '') {
		var selects = divid.getElementsByTagName('select');
		for (var i = 0; i < selects.length; i++) {
			selects[i].style.display = 'none';
			if (selects[i].name == show) {
				selects[i].style.display = 'block';
			}
		}
	}
}
</script>

 

[Davic]

Thanks alot Dan very fast and just what I want, Adding trader ranking now.