Three level connected boxes

levani · 08-30-2010, 02:17 PM

Is there a way add another dropdown form to this script?

http://javascript.internet.com/navig...-comboxes.html

Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...

Thanks in advance...

DaveyErwin · 08-30-2010, 08:43 PM

here is a very simple example...

Code:

<html>
<head>
<script>
changed=(function(){
	this.args = arguments;
	this.mem;
	return function(el,num){
		el.nextSibling.nextSibling.options.length=args[el.selectedIndex].length;
		for(var i = args[el.selectedIndex].length; i--;){
		    if(num){
			
			el.nextSibling.nextSibling.options[i].text=
				args[num][mem][el.selectedIndex][i];
		    }else{
			mem=el.selectedIndex;
			el.nextSibling.nextSibling.options[i].text=
				args[num][el.selectedIndex][i];
			changed(el.nextSibling.nextSibling,1)
		    }
		}
	}
})([['north','south'],['east','west']],
[[['chicago','Minnapolis'],['Atlanta','Nasville']],
[['New York','Boston'],['Los Angeles','San Diego']]])
</script>
</head>
<body>

<select onchange="changed(this,0)">
<option>opt 1</option>
<option>opt 2</option>
</select>
<select onchange="changed(this,1)">
<option value=""> </option>
</select>
<select>
<option value=""> </option>
</select>
</body>

</html>

levani · 08-31-2010, 09:49 AM

DaveyErwin works fine. Thank you very much!!!

DaveyErwin · 08-31-2010, 10:12 AM

Well sure it works fine just as is,
you will have a hard to impossible
task modifying it to suit your needs.
Of course Ill help if needed.

Thank you for the Thank you!

levani · 08-31-2010, 10:17 AM

OK, is there a way to add some value to each option too? As I see now it changes names only...

DaveyErwin · 08-31-2010, 11:09 AM

Code:

<html>
<head>
<script>
changed=(function(){
	this.args = arguments;
	this.mem;
	return function(el,num){
		//eln = el.nextSibling.nextSibling;
		el.nextSibling.nextSibling.options.length=args[el.selectedIndex].length;
		for(var i = args[el.selectedIndex].length; i--;){
		    if(num){			
			el.nextSibling.nextSibling.options[i].text=
				args[num][mem][el.selectedIndex][i][0];
			el.nextSibling.nextSibling.options[i].value=
				args[num][mem][el.selectedIndex][i][1];
		    }else{
			mem=el.selectedIndex;
			el.nextSibling.nextSibling.options[i].text=
				args[num][el.selectedIndex][i][0];
			el.nextSibling.nextSibling.options[i].value=
				args[num][el.selectedIndex][i][1];
			changed(el.nextSibling.nextSibling,1);			
		    }}}
})([[['north','nor'],['south','sou']],[['east','eas'],['west','wes']]],
[[[['Chicago','chi'],['Minnapolis','min']],[['Atlanta','atl'],['Nasville','nas']]],
[[['New York','ny'],['Boston','bos']],[['Los Angeles','la'],['San Diego','sd']]]])
</script>
</head>
<body>
<select onchange="changed(this,0)">
<option>opt 1</option>
<option>opt 2</option>
</select>
<select onchange="changed(this,1)">
<option value=""> </option>
</select>
<select>
<option value=""> </option>
</select>
</body>
</html>

Sciliano · 08-31-2010, 12:39 PM

levani:

Or...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/*   Dependent Select List, v1.1 */
/*   Copyright 2007, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
/*   Free use of the code, so long as this notice is kept intact */

	var categories = [];   // Option Text|Option Value; 
	categories['Kids'] = ['Birthday|Birthday','Christmas|Christmas'];
	categories['Adults'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|Corporate'];
	categories['Mixed'] = ['Birthday|Birthday','Christmas|Christmas','Corporate|Corporate'];
	categories['Birthday'] = ['Disney|DisneyValue','Pirates|PriatesValue','Princess|PrinessValue','Ballet|BalletValue','Magic|MagicValue','Surfer|SurferValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\'s|50\'sValue','Rock & Roll|RRValue','Horses|HorsesValue','Zoo|ZooValue'];
	categories['Christmas'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue'];
	categories['Corporate'] = ['Magic|MagicValue','Hawaiian|HawaiianValue','50\'s 60\'s 70\s|50\'sValue','Rock & Roll|RRValue'];

	var dynList = ['partyType','theme'];  // the "names" of the dynamic lists, as they occur in the form;

	function fillSelect(currCat,currList,step){

		for (i=step; i<dynList.length; i++)
			{
			 document.forms[0][dynList[i]].length = 1;
			 document.forms[0][dynList[i]].selectedIndex = 0;
			}
		var nCategory = categories[currCat];
		for (each in nCategory)
			{
			 var nOption = document.createElement('option'); 
			 var nInfo = nCategory[each].split("|");
			 nOption.value = nInfo[1]; 
			 nOption.appendChild(document.createTextNode(nInfo[0])); 
			 currList.appendChild(nOption); 
			} 
	}

	function init(){

		var nForm = document.forms[0];
		nForm['ageGroup'].onchange = function()
			{
			 fillSelect(this.value,this.form['partyType'],0);
			}
		nForm['partyType'].onchange = function()
			{
			 fillSelect(this.value,this.form['theme'],1);
			}
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

	
</script>
<style type="text/css">

	 body {background-color: #eae3c6; margin-top: 60px;}
	 form {width: 300px; margin: auto;}
	 fieldset {width: 300px; background-color: #f0fff0; border: 1px solid #87ceeb;}
	 legend {font-family:times; font-size: 14pt ;color: #00008b; background-color: #87ceeb; 
		 padding-left: 3px; padding-right: 3px ;margin-bottom:5px}
	 label {font-family: times; font-size: 12pt ;color: #00008b; padding :5px;}
	 select {font-family: times; font-size: 10pt; width: 150px; display:block; 
		 margin-left: auto; margin-right: auto ;margin-top: 8px;}
	.submitBtn {font-family: tahoma; font-size: 10pt; display :block; margin-left: auto;
		    margin-right: auto; margin-top: 5px ;margin-bottom: 5px;}
	
</style>
</head>
	<body>
		<form method="post" action="">
		   <fieldset>
			<legend>Party Planner</legend>
				<select name="ageGroup">
					<option value="">- Age Group -</option>
					<option value="Kids">Kids (up to 21)</option>
					<option value="Adults">Adults (21 and up)</option>
					<option value="Mixed">Kids and Adults</option>
				</select>
			
				<select name="partyType">
					<option value="">- Party Type -</option>
				</select>

				<select name="theme">
					<option value="">- Party Theme -</option>
				</select>

			<input type="submit" name="submit" value="Submit" class='submitBtn'>
		   </fieldset>
		</form>
	</body>
</html>

Jer · 08-31-2010, 01:17 PM

I'm actually running into the same need as this guy only I've got about 5 levels lol... My main challenge is i need the values to be pulled from several mysql tables. Bottom line is I'm looking at drop downs that need to be flexible to change in categories. Is there a way to achieve this?

levani · 09-02-2010, 07:19 PM

Sciliano your code looks a bit easier to make it work with options generated from database. But it has a serious bug. The script stops working if there is another form on the page... Beside the form where I use this drop down lists, I have a search form too. So it works only if I remove this form.