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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    cascading selects

    perhaps this is more patently obvious that I think it is

    On an HTML page I will have a set of three <SELECT>s. The choice made in Select1 will determine what can be seen in Select2. the choice in Select2 will control what can be seen in Select3.

    The question is how to a get client side Javascript to change the content of the other two selects after a selection is made in the other one?

    TIA

    Garry

  • #2
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var categories = [];
    	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'];
    
    	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("|");
    			 var nText = document.createTextNode(nInfo[0]); 
    			 nOption.setAttribute('value',nInfo[1]); 
    			 nOption.appendChild(nText); 
    			 currList.appendChild(nOption); 
    			} 
    	}
    	
    </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" onchange="fillSelect(this.value,this.form['partyType'],0)">
    					<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" size="1" onchange="fillSelect(this.value,this.form['theme'],1)">
    					<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>

  • Users who have thanked Cranford for this post:

    garryw (08-29-2008)


  •  

    Posting Permissions

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