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 9 of 9
  1. #1
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post

    Three level connected boxes

    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...

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>

  • Users who have thanked DaveyErwin for this post:

    levani (08-31-2010)

  • #3
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post
    DaveyErwin works fine. Thank you very much!!!

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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!

  • #5
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post
    OK, is there a way to add some value to each option too? As I see now it changes names only...

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>
    Last edited by Sciliano; 08-31-2010 at 09:52 PM.

  • #8
    Jer
    Jer is offline
    New Coder
    Join Date
    Aug 2010
    Location
    South Bend, Indiana
    Posts
    41
    Thanks
    2
    Thanked 1 Time in 1 Post
    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?

  • #9
    Regular Coder levani's Avatar
    Join Date
    Mar 2009
    Location
    Georgia
    Posts
    183
    Thanks
    29
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

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