...

View Full Version : Dynamic Lists not working



Sherrie
01-06-2007, 08:38 AM
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/demographics_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:



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



<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

felgall
01-06-2007, 11:43 AM
<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.

Sherrie
01-06-2007, 11:49 AM
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.

Ancora
01-06-2007, 12:36 PM
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.



<!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|Magi cValue','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>

Sherrie
01-07-2007, 12:43 AM
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?


<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


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

Ancora
01-07-2007, 01:03 PM
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.



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

Sherrie
01-08-2007, 02:26 PM
Ancora,

Thank you! It's nice to be appreciated. :p

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

Ancora
01-08-2007, 02:42 PM
Sherrie:

You're welcome. Good luck with your project.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum