...

View Full Version : cascading selects



garryw
08-28-2008, 09:57 PM
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

Cranford
08-28-2008, 10:26 PM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum