...

View Full Version : Three level connected boxes



levani
08-30-2010, 02:17 PM
Is there a way add another dropdown form to this script?

http://javascript.internet.com/navigation/connected-comboxes.html

Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...

Thanks in advance...

DaveyErwin
08-30-2010, 08:43 PM
here is a very simple example...


<html>
<head>
<script>
changed=(function(){
this.args = arguments;
this.mem;
return function(el,num){
el.nextSibling.nextSibling.options.length=args[el.selectedIndex].length;
for(var i = args[el.selectedIndex].length; i--;){
if(num){

el.nextSibling.nextSibling.options[i].text=
args[num][mem][el.selectedIndex][i];
}else{
mem=el.selectedIndex;
el.nextSibling.nextSibling.options[i].text=
args[num][el.selectedIndex][i];
changed(el.nextSibling.nextSibling,1)
}
}
}
})([['north','south'],['east','west']],
[[['chicago','Minnapolis'],['Atlanta','Nasville']],
[['New York','Boston'],['Los Angeles','San Diego']]])
</script>
</head>
<body>

<select onchange="changed(this,0)">
<option>opt 1</option>
<option>opt 2</option>
</select>
<select onchange="changed(this,1)">
<option value=""> </option>
</select>
<select>
<option value=""> </option>
</select>
</body>

</html>

levani
08-31-2010, 09:49 AM
DaveyErwin works fine. Thank you very much!!!

DaveyErwin
08-31-2010, 10:12 AM
Well sure it works fine just as is,
you will have a hard to impossible
task modifying it to suit your needs.
Of course Ill help if needed.

Thank you for the Thank you!

levani
08-31-2010, 10:17 AM
OK, is there a way to add some value to each option too? As I see now it changes names only...

DaveyErwin
08-31-2010, 11:09 AM
<html>
<head>
<script>
changed=(function(){
this.args = arguments;
this.mem;
return function(el,num){
//eln = el.nextSibling.nextSibling;
el.nextSibling.nextSibling.options.length=args[el.selectedIndex].length;
for(var i = args[el.selectedIndex].length; i--;){
if(num){
el.nextSibling.nextSibling.options[i].text=
args[num][mem][el.selectedIndex][i][0];
el.nextSibling.nextSibling.options[i].value=
args[num][mem][el.selectedIndex][i][1];
}else{
mem=el.selectedIndex;
el.nextSibling.nextSibling.options[i].text=
args[num][el.selectedIndex][i][0];
el.nextSibling.nextSibling.options[i].value=
args[num][el.selectedIndex][i][1];
changed(el.nextSibling.nextSibling,1);
}}}
})([[['north','nor'],['south','sou']],[['east','eas'],['west','wes']]],
[[[['Chicago','chi'],['Minnapolis','min']],[['Atlanta','atl'],['Nasville','nas']]],
[[['New York','ny'],['Boston','bos']],[['Los Angeles','la'],['San Diego','sd']]]])
</script>
</head>
<body>
<select onchange="changed(this,0)">
<option>opt 1</option>
<option>opt 2</option>
</select>
<select onchange="changed(this,1)">
<option value=""> </option>
</select>
<select>
<option value=""> </option>
</select>
</body>
</html>

Sciliano
08-31-2010, 12:39 PM
levani:

Or...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* Dependent Select List, v1.1 */
/* Copyright 2007, Michael J. Hill. All rights reserved. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as this notice is kept intact */

var categories = []; // Option Text|Option Value;
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']; // the "names" of the dynamic lists, as they occur in the form;

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("|");
nOption.value = nInfo[1];
nOption.appendChild(document.createTextNode(nInfo[0]));
currList.appendChild(nOption);
}
}

function init(){

var nForm = document.forms[0];
nForm['ageGroup'].onchange = function()
{
fillSelect(this.value,this.form['partyType'],0);
}
nForm['partyType'].onchange = function()
{
fillSelect(this.value,this.form['theme'],1);
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);


</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">
<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">
<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>

Jer
08-31-2010, 01:17 PM
I'm actually running into the same need as this guy only I've got about 5 levels lol... My main challenge is i need the values to be pulled from several mysql tables. Bottom line is I'm looking at drop downs that need to be flexible to change in categories. Is there a way to achieve this?

levani
09-02-2010, 07:19 PM
Sciliano your code looks a bit easier to make it work with options generated from database. But it has a serious bug. The script stops working if there is another form on the page... Beside the form where I use this drop down lists, I have a search form too. So it works only if I remove this form.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum