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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Lists not working

    Hi there!

    I'm designing an online employee opinion survey. To collect some demographics, I have a form with 5 drop down lists.

    http://www.kbeconsultancy.com/hgeos/...phics_test.php

    What I'm trying to do is to populate the Department list based on values selected in Division.

    Then again to populate the Section list based on values selected in Department.

    Here are snippets of my code:

    Code:
    <script language="JavaScript" type=text/Javascript">
    
    function department(div)
    {
    var.IntPath=document.demo.dept;
    var.TheOptions=IntPath.options.length;
    document.demo.dept.options.length=0 
    
    	switch(div.value)
    	{
    		case "1":
    		IntPath.options[TheOptions]=new Option('Not Applicable','1');
    		break
    		
    		case "2":
    		IntPath.options[TheOptions]=new Option('Watchcare Centre','2');
    		IntPath.options[TheOptions]=new Option('Marketing Department','3');
    		IntPath.options[TheOptions]=new Option('Creative Department','4');
    		break
    		
    		case "3":
    		IntPath.options[TheOptions]=new Option('Brands Department','5');
    		IntPath.options[TheOptions]=new Option('Retail Department','6');
    		break
    		
    		case "4":
    		IntPath.options[TheOptions]=new Option('HR Department','7');
    		IntPath.options[TheOptions]=new Option('Finance Department','8');
    		break
    	}
    }
    
    function section(dept)
    {
    var.section=document.demo.section;
    var.sectoptions=section.options.length;
    document.demo.section.options.length=0;
    
    	switch(dept.value)
    	{
    		case "1":
    		section.options[sectoptions]=new Option('Not Applicable','1');
    		break
    		
    		case "2":
    		section.options[sectoptions]=new Option('Not Applicable','1');
    		break
    		
    		case "3":
    		section.options[sectoptions]=new Option('Not Applicable','1');
    		break
    		
    		case "4":
    		section.options[sectoptions]=new Option('Not Applicable','1');
    		break
    		
    		case "5":
    		section.options[sectoptions]=new Option('Not Applicable','1');
    		break
    		
    		case "6":
    		section.options[sectoptions]=new Option('Lucky Plaza','2');
    		section.options[sectoptions]=new Option('Millenia Walk','3');
    		section.options[sectoptions]=new Option('Peninsula Plaza','4');
    		section.options[sectoptions]=new Option('Ngee Ann City','5');
    		section.options[sectoptions]=new Option('Raffles Arcade','6');
    		section.options[sectoptions]=new Option('Tang Plaza','7');
    		break
    		
    		case "7"
    		section.options[sectoptions]=new Option('Office Administration','8');
    		section.options[sectoptions]=new Option('HR','9');
    		break
    		
    		case "8"
    		section.options[sectoptions]=new Option('Inventory','10');
    		section.options[sectoptions]=new Option('Finance','11');
    		section.options[sectoptions]=new Option('MIS','12');
    		break
    	}
    }
    </script>
    I call the functions in the HTML form:

    Code:
    <select name="div" id="div" onchange="department(document.demo.div)">
    
    <select name="dept" id="dept" onchange="section(document.demo.dept)">
    I have tried this in IE V6.0 but it doesn't work. My Department list and Section list are still blank.

    Would appreciate any help i can get!

    Thanks in advance
    Last edited by Sherrie; 01-06-2007 at 08:51 AM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <select name="div" id="div" onchange="department(document.demo.div[document.demo.div.selectedIndex])">

    you need to specify the selected entry in the array of options in order to get the value of that one, the select itself doesn't have a value.
    Last edited by felgall; 01-06-2007 at 11:46 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    felgall,

    Thank you for your reply.

    How would I go about setting the array? I'm pretty new to this, so I'm quite confused.

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sherrie:

    Here's an example. Change the data to suit you. The ageGroup list becomes Division, the partyType list becomes Department, etc. Then change the data in the arrays at the top. Currently, selecting "Kids" from the first list, populates the second list with: Birthday and Christmas. Selecting "Christmas" from the second list, populates the third with:'Magic, 'Hawaiian, 50\'s 60\'s, 70\'s. The \ allows the ' to be displayed.

    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>

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora,

    Thank you for your reply.

    I've tried the code, and I still can't make it work.

    Here it is. Could you please tell me where I've gone wrong?

    Code:
    <script type="text/javascript">
    
    	var categories = [];
    	categories['Executive Office Division'] = ['Not Applicable|1'];
    	categories['Sales &amp; Marketing Division'] = ['Watchcare Centre Department|2','Marketing Department|3','Creative Department|4'];
    	categories['Sales &amp; Operations Division'] = ['Brands Department|5','Retail Department|6'];
    	categories['Admin &amp; Finance Division'] = ['HR Department|7','Finance Department|8'];
    	categories['Not Applicable'] = ['Not Applicable|1'];
    	categories['Watchcare Centre Department'] = ['Not Applicable|1'];
    	categories['Marketing Department'] = ['Not Applicable|1'];
    	categories['Creative Department'] = ['Not Applicable|1'];
    	categories['Brands Department'] = ['Not Applicable|1'];
    	categories['Retail Department'] = ['Lucky Plaza|2','Millenia Walk|3','Peninsula Plaza|4','Ngee Ann City|5','Raffles Arcade|6','Tang Plaza|7'];
    	categories['HR Department'] = ['Office Administration|8','HR|9'];
    	categories['Finance Department'] = ['Inventory|10','Finance|11','MIS|12'];
    
    	var dynList = ['dept','section'];
    
    	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>
    I had initially thought it had something to do with the fieldset, but it still didn't work when I added the fieldset as well. http://www.kbeconsultancy.com/hgeos/demographics2.php

    Code:
            <select name="div" id="div" onchange="fillSelect(this.value,this.form['dept'],0)">
              <option selected>---Please Select---</option>
              <option value="1">Executive Office Division</option>
              <option value="2">Sales &amp; Marketing Division</option>
              <option value="3">Sales &amp; Operations Division</option>
              <option value="4">Admin &amp; Finance Division</option>
            </select>
    
            <select name="dept" id="dept" onchange="fillSelect(this.value,this.form['section'],1)">
            <option value="">--- Please Select ---</option>
            </select>
    
            <select name="section" id="section">
            <option value="">--- Please Select ---</option>
            </select>
    Greatly appreciate your help!
    Last edited by Sherrie; 01-07-2007 at 02:42 AM.

  • #6
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sherrie:

    I appreciate your courtesy. It's a rarity here.

    In the first code I poted, the option "value" is used as the array $key. Your option values are different from the option text. I modified the select list "onchange" code to pass the option text to the function, instead of the option value.

    Also, in this situation, because the array items are not "displayed," you cannot use &amp. Just use the ampersand, both in the option text and in the array $key.

    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['Executive Office Division'] = ['Not Applicable|1'];
    	categories['Sales & Marketing Division'] = ['Watchcare Centre Department|2','Marketing Department|3','Creative Department|4'];
    	categories['Sales & Operations Division'] = ['Brands Department|5','Retail Department|6'];
    	categories['Admin & Finance Division'] = ['HR Department|7','Finance Department|8'];
    	categories['Not Applicable'] = ['Not Applicable|1'];
    	categories['Watchcare Centre Department'] = ['Not Applicable|1'];
    	categories['Marketing Department'] = ['Not Applicable|1'];
    	categories['Creative Department'] = ['Not Applicable|1'];
    	categories['Brands Department'] = ['Not Applicable|1'];
    	categories['Retail Department'] = ['Lucky Plaza|2','Millenia Walk|3','Peninsula Plaza|4','Ngee Ann City|5','Raffles Arcade|6','Tang Plaza|7'];
    	categories['HR Department'] = ['Office Administration|8','HR|9'];
    	categories['Finance Department'] = ['Inventory|10','Finance|11','MIS|12'];
    
    	var dynList = ['dept','section'];
    
    	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:175px;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>Survey</legend>					
    				<select name="div" onchange="fillSelect(this.options[this.selectedIndex].text,this.form['dept'],0)">
             				<option selected>---Please Select---</option>
              				<option value="1">Executive Office Division</option>
              				<option value="2">Sales & Marketing Division</option>
              				<option value="3">Sales & Operations Division</option>
              				<option value="4">Admin & Finance Division</option>
            			</select>
    
    				<select name="dept" onchange="fillSelect(this.options[this.selectedIndex].text,this.form['section'],1)">
            				<option value="">--- Please Select ---</option>
            			</select>
    
            			<select name="section">
            				<option value="">--- Please Select ---</option>
           				</select>
    
    				<input type='submit' name='submit' value="Submit" class='submitBtn'>
    		   </fieldset>
    		</form>
    	</body>
    </html>

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ancora,

    Thank you! It's nice to be appreciated.

    Thank you for your reply and patience in explaining. Will try to understand the code and let you know how it goes.

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sherrie:

    You're welcome. Good luck with your project.


  •  

    Posting Permissions

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