...

View Full Version : Dynamic Select Lists



inko9nito
12-12-2006, 06:48 AM
I want to create 3 dynamic select lists. Each list will be based on the one before it. First the user will select the age group, then based on the age group, there will be a list of parties, and based on the selected party, there will be a list of themes.

I used the code from this (http://www.javascriptkit.com/javatutors/selectcontent2.shtml) tutorial to create 2 lists, but when I edit it to add a third list, it seems to white out the second list (which is what the function calls for) but doesn't repopulate it.

I'm new to JavaScript so I'm not sure what is causing this, but I don't see anything wrong with it myself

This is my code:



<body>
<form name="form1">

<select name="ageGroup" size="1" onChange="updatePartyType(this.selectedIndex)" style="width: 150px">
<option value="---" selected="selected">- 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="updateTheme(this.selectedIndex)" style="width: 150px">
<option value="- Party Type -" selected="selected">- Party Type -</option>
</select>

<select name="theme" size="1" style="width: 150px">
<option value="- Party Theme -" selected="selected">- Party Theme -</option>
</select>

</form>

<script type="text/javascript">
var ageGroupList=document.form1.ageGroup
var partyTypeList=document.form1.partyType
var themeList=document.form1.theme

var ageGroup=new Array()
ageGroup[0]="---"

// if "Kids" is picked these types of parties will show up
ageGroup[1]=["Birthday|birthday", "Christmas|christmas"]

// if "Adults" is picked these types of parties will show up
ageGroup[2]=["Birthday|birthday", "Christmas|christmas", "Corporate|corporate"]

// if "mixed" is picked these types of parties will show up
ageGroup[3]=["Birthday|birthday", "Christmas|christmas", "Corporate|corporate"]


var theme=new Array()
theme[0]="---"

// If "Birthday" is picked these themes will show up
theme[1]=[
"Disney Themes|disneyValue",
"Pirates|piratesValue",
"Princess|princessValue",
"Ballet|balletValue",
"Magic|magicValue",
"Surfer|surferValue",
"Hawaiian|hawaiianValue",
"50's/60's/70's|50sValue",
"Rock &amp; Roll|rrValue",
"Horses|horsesValue",
"Zoo|zooValue"]

// If "Christmas" is picked these themes will show up
theme[2]=[
"Magic|magicValue",
"Hawaiian|hawaiianValue",
"50's/60's/70's|50sValue"]

// If "Corporate" is picked these themes will show up
theme[3]=[
"Magic|magicValue",
"Hawaiian|hawaiianValue",
"50's/60's/70's|50sValue",
"Rock &amp; Roll|rrValue"]

// Function to update the party type based on age group
function updatePartyType(selectedAgeGroup)
{
partyTypeList.options.length=0
if (selectedAgeGroup>0)
{
for (i=0; i<partyType[selectedAgeGroup].length; i++)
partyTypeList.options[partyTypeList.options.length]=new Option(partyType[selectedAgeGroup][i].split("|")[0], partyType[selectedAgeGroup][i].split("|")[1])
}
}

// Function to update the theme based on type of party
function updateTheme(selectedPartyType)
{
themeList.options.length=0
if (selectedPartyType>0)
{
for (i=0; i<theme[selectedPartyType].length; i++)
themeList.options[themeList.options.length]=new Option(theme[selectedPartyType][i].split("|")[0], theme[selectedPartyType][i].split("|")[1])
}
}

</script>
</body>



Please help :( Thanks in advance.

Arbitrator
12-12-2006, 12:12 PM
Here, try this. I re‐authored your document using code thatís a bit more modern. You can view a functional copy here (http://jsg.byethost4.com/demos/CF102817.html).

Note that it doesnít work in Internet Explorer because I used the addEventListener (http://www.quirksmode.org/js/events_advanced.html) method which that browser, unfortunately, does not support; if necessary, you should be able to easily circumvent that issue by using the traditional event registration model (http://www.quirksmode.org/js/events_tradmod.html). Iíll leave that part to you, however.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="Author" content="Patrick Garies"/>
<title>XHTML 1 Strict Document</title>

<style type="text/css">
* { margin: 0; }
html { padding: 1em; text-align: center; }
ul, li { display: inline; }
li:first-child:after { content: " |"; }
a { text-transform: capitalize; text-decoration: none; }
abbr { border: 0 none; }
fieldset { margin: 1em; padding: 0.5em; }
select { width: 150px; }
</style>

<script type="text/javascript">
<!--//--><![CDATA[//><!--

var ageGroupList, partyTypeList, partyThemeList;
var partyOptions = new Array();
/* Party Types */
partyOptions[0] = new Array("birthday", "Birthday");
partyOptions[1] = new Array("Christmas", "Christmas");
partyOptions[2] = new Array("corporate", "Corporate");
/* Party Themes */
partyOptions[3] = new Array("fiftiesSixtiesSeventies", "50s/60s/70s");
partyOptions[4] = new Array("ballet", "Ballet");
partyOptions[5] = new Array("Disney", "Disney");
partyOptions[6] = new Array("Hawaiian", "Hawaiian");
partyOptions[7] = new Array("horses", "Horses");
partyOptions[8] = new Array("magic", "Magic");
partyOptions[9] = new Array("pirates", "Pirates");
partyOptions[10] = new Array("princess", "Princess");
partyOptions[11] = new Array("rockAndRoll", "Rock & Roll");
partyOptions[12] = new Array("surfer", "Surfer");
partyOptions[13] = new Array("zoo", "Zoo");

/* This creates all of the option elements. */
for (var i = 0; i < partyOptions.length; i++) {
eval("var " + partyOptions[i][0] + " = document.createElement('option');");
eval(partyOptions[i][0] + ".setAttribute('value', '" + partyOptions[i][0] + "');");
eval(partyOptions[i][0] + ".appendChild(document.createTextNode('" + partyOptions[i][1] + "'));")
}

/* This resets the one or both of the latter two select lists when called. */
function reset(all) {
partyThemeList.getElementsByTagName("option")[0].selected = true;
for (var i = partyThemeList.getElementsByTagName("option").length - 1; i > 0; i--) {
partyThemeList.removeChild(partyThemeList.getElementsByTagName("option")[i]);
}
if (all == true) {
partyTypeList.getElementsByTagName("option")[0].selected = true;
for (var i = partyTypeList.getElementsByTagName("option").length - 1; i > 0; i--) {
partyTypeList.removeChild(partyTypeList.getElementsByTagName("option")[i]);
}
}
}

document.defaultView.addEventListener("load", function() {
ageGroupList = document.getElementById("ageGroup");
partyTypeList = document.getElementById("partyType");
partyThemeList = document.getElementById("partyTheme");

/* This populates the second select list based upon the value of the first select list. */
ageGroupList.addEventListener("change", function() {
reset(true);
if (this.value == "kids") {
partyTypeList.appendChild(birthday);
partyTypeList.appendChild(Christmas);
}
else if (this.value == "adults" || "mixed") {
partyTypeList.appendChild(birthday);
partyTypeList.appendChild(Christmas);
partyTypeList.appendChild(corporate);
}
}, false);

/* This populates the third select list based upon the value of the second select list. */
partyTypeList.addEventListener("change", function() {
reset(false);
if (this.value == "birthday") {
partyThemeList.appendChild(fiftiesSixtiesSeventies);
partyThemeList.appendChild(ballet);
partyThemeList.appendChild(Disney);
partyThemeList.appendChild(Hawaiian);
partyThemeList.appendChild(horses);
partyThemeList.appendChild(magic);
partyThemeList.appendChild(pirates);
partyThemeList.appendChild(princess);
partyThemeList.appendChild(rockAndRoll);
partyThemeList.appendChild(surfer);
partyThemeList.appendChild(zoo);
}
else if (this.value == "Christmas") {
partyThemeList.appendChild(fiftiesSixtiesSeventies);
partyThemeList.appendChild(Hawaiian);
partyThemeList.appendChild(magic);
}
else if (this.value == "corporate") {
partyThemeList.appendChild(fiftiesSixtiesSeventies);
partyThemeList.appendChild(Hawaiian);
partyThemeList.appendChild(magic);
partyThemeList.appendChild(rockAndRoll);
}
}, false);
}, false);

//--><!]]>
</script>

</head>
<body>

<ul>
<li><a href="CF102817.html">View as <abbr title="Hypertext Markup Language">HTML</abbr></a> (text/html).</li>
<li><a href="CF102817.xhtml">View as <abbr title="Extensible Hypertext Markup Language">XHTML</abbr></a> (application/xhtml+xml).</li>
</ul>

<fieldset>
<select id="ageGroup">
<option value="null" selected="selected">- 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 id="partyType">
<option value="null" selected="selected">- Party Type -</option>
</select>

<select id="partyTheme">
<option value="null" selected="selected">- Party Theme -</option>
</select>
</fieldset>

</body>
</html>

inko9nito
12-12-2006, 10:49 PM
Wow! Thank you SOOO much! I will try this out!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum