...

View Full Version : Cascading DropDown Lists..



Mad_T
05-30-2012, 06:17 PM
I'm looking to have 3 dropdown lists A,B & C
When A is changed B updates, When B is changed C updates.

I've some working examples, but they all use the value fields so I can't assign values to A,B or C and I need to be able to do this.

Any ideas ?

This is post has one script that works, but I still can't assign values to the dropdowns.
http://www.codingforums.com/showthread.php?t=164733

Thanks :)

jmrker
05-30-2012, 10:56 PM
I'm looking to have 3 dropdown lists A,B & C
When A is changed B updates, When B is changed C updates.

I've some working examples, but they all use the value fields so I can't assign values to A,B or C and I need to be able to do this.

Any ideas ?

This is post has one script that works, but I still can't assign values to the dropdowns.
http://www.codingforums.com/showthread.php?t=164733

Thanks :)

Please explain what you mean by the last statement.

What values do you wish to assign to the drop downs?
What are the values and what are the associated visible parts of the dropdowns?
What values should be assigned to A, B and C? And what selections should be displayed when A is changed to B or C?
:confused:

Mad_T
05-31-2012, 11:27 AM
Thanks for taking the time to reply :)

The script I've tested works fine, but it seems to be using the dropdown list values to link to the next list. This won't work for me as I need to get the true values from each list.

This is what I'm trying to achieve.
3 Lists A, B & C

LIST A will contain upto 6 entries, but to start with 3 will be fine:
User, Device, Location

I would like 'A' to show as User, Device and Location with each entry having it's own name as the value. eg:
<option value="user">User</option>

Then depending on what is selected from A, list B will need to update to show the relevant entries.

If Users is selected in A, B would update to show a list of user names, the value set against each name is unique and can be between 10 - 15 characters.

If Device is selected in A, B would update to show a list of device names, the value set against each name is unique and can be between 10 - 15 characters.

If Location is selected in A, B would update to show a list of location names, the value set against each name is unique and can be between 10 - 15 characters.

List C is slightly different and ideally is based on list A. So if A is Users a predefined list for users would be listed. The values would be unique for each entry. A new list presented if A = device and a last list if A = location.

I hope that makes more sense :)

Thanks again.

Philip M
05-31-2012, 01:42 PM
This should give you a start in populating a second select list according to the selection made in the first:-


<html>
<head>

<script type="text/javascript">

var countries = [ ];
countries["Egypt"] = ["Cairo","Alexandria","Sharm","Luxor"];
countries["Germany"] = ["Munchen","Dortmund","Berlin","Koln"];
countries["France"] = ["Paris", "Rouen", "Lyon", "Marseilles"];
countries["USA"] = ["New York","Chicago","Dallas","Seattle","Los Angeles", "Atlanta", "Boston"];
countries["Japan"] = ["Tokyo","Osaka","Kyoto","Sapporo"];

function switchCountry(selCountry) {
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s ) {
citySel.options[s] = null;
}

var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null ) {
for ( var i = 0; i < cList.length; ++i ) {
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}

}

function showSelection() {
var country = document.forms[0].Country.value;
var city = document.forms[0].City.value;
if (city != "") {
alert ("You selected " + city + " in " + country);
}
}

</script>

</head>
<body>
<form>
<select name="Country" onchange="switchCountry(this);">
<option value = "">Choose Country</option>
<option value = "Egypt">Egypt</option>
<option value = "Germany">Germany</option>
<option value = "France">France</option>
<option value = "Japan">Japan</option>
<option value = "USA">USA</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;
<select name="City" onchange = "showSelection()">
<option>Choose City</option>
</select>
</form>
</body>
</html>

I am afraid that I do not understand how your List C is arrived at.

vwphillips
05-31-2012, 01:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var categories = []; // Option Text|Option Value|use array;
categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|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, from top to bottom, in the form;

function fillSelect(sel,to,step,ary){
var frm=sel.form
ary=ary||fillSelect[sel.name];
for (var i=step; i<dynList.length; i++)
{
document.forms[0][dynList[i]].length = 1;
document.forms[0][dynList[i]].selectedIndex = 0;
}
fillSelect[to]=[];
if (ary&&frm[to]){
var nCategory = categories[ary[sel.selectedIndex-1]];
if (nCategory){
for (each in nCategory)
{
var nOption = document.createElement('option');
var nInfo = nCategory[each].split("|");
nOption.setAttribute('value',nInfo[1]);
fillSelect[to].push(nInfo[2]);
nOption.appendChild(document.createTextNode(nInfo[0]));
frm[to].appendChild(nOption);
}
}
}
}

</script>
</head>
<body>
<form method="post" action="">

<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed'])">
<option value="">- Age Group -</option>
<option value="A">Kids (up to 21)</option>
<option value="B">Adults (21 and up)</option>
<option value="C">Kids and Adults</option>
</select>

<select name="partyType" size="1" onchange="fillSelect(this,'theme',1)">
<option value="">- Party Type -</option>
</select>

<select name="theme">
<option value="">- Party Theme -</option>
</select>

</form>
</body>
</html>

Mad_T
05-31-2012, 04:25 PM
Thanks for the examples.
@vwphillips - how do I set the values for the 3 lists ? and then capture the values ?

Thanks

vwphillips
05-31-2012, 05:10 PM
see code in red


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

var categories = []; // Option Text|Option Value|use array;
categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|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, from top to bottom, in the form;

function fillSelect(sel,to,step,ary){
var frm=sel.form
ary=ary||fillSelect[sel.name];
for (var i=step; i<dynList.length; i++)
{
document.forms[0][dynList[i]].length = 1;
document.forms[0][dynList[i]].selectedIndex = 0;
}
fillSelect[to]=[];
if (ary&&frm[to]){
var nCategory = categories[ary[sel.selectedIndex-1]];
if (nCategory){
for (each in nCategory)
{
var nOption = document.createElement('option');
var nInfo = nCategory[each].split("|");
nOption.setAttribute('value',nInfo[1]);
fillSelect[to].push(nInfo[2]);
nOption.appendChild(document.createTextNode(nInfo[0]));
frm[to].appendChild(nOption);
}
}
}
function bycls(nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
}

}

</script>
</head>
<body>
<form method="post" action="">

<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed']);alert(this.value);">
<option value="">- Age Group -</option>
<option value="A">Kids (up to 21)</option>
<option value="B">Adults (21 and up)</option>
<option value="C">Kids and Adults</option>
</select>

<select name="partyType" size="1" onchange="fillSelect(this,'theme',1);alert(this.value);">
<option value="">- Party Type -</option>
</select>

<select name="theme" onchange="alert(this.value);">
<option value="">- Party Theme -</option>
</select>

</form>
</body>
</html>

Mad_T
05-31-2012, 05:40 PM
Thanks..
When I tried that I didn't get the values for the lists.
This is what I used :


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

var categories = []; // Option Text|Option Value|use array;
categories['Kids'] = ['Birthday|1|Birthday','Christmas|2|Christmas'];
categories['Adults'] = ['Birthday|3|Birthday','Christmas|4|Christmas','Corporate|5|Corporate'];
categories['Mixed'] = ['Birthday|6|Birthday','Christmas|7|Christmas','Corporate|8|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, from top to bottom, in the form;

function fillSelect(sel,to,step,ary){
var frm=sel.form
ary=ary||fillSelect[sel.name];
for (var i=step; i<dynList.length; i++)
{
document.forms[0][dynList[i]].length = 1;
document.forms[0][dynList[i]].selectedIndex = 0;
}
fillSelect[to]=[];
if (ary&&frm[to]){
var nCategory = categories[ary[sel.selectedIndex-1]];
if (nCategory){
for (each in nCategory)
{
var nOption = document.createElement('option');
var nInfo = nCategory[each].split("|");
nOption.setAttribute('value',nInfo[1]);
fillSelect[to].push(nInfo[2]);
nOption.appendChild(document.createTextNode(nInfo[0]));
frm[to].appendChild(nOption);
}
}
}
}

</script>
</head>
<body>
<?php
echo $_POST['agegroup']."<br/>";
echo $_POST['partytype']."<br/>";
echo $_POST['theme']."<br/>";
?>
<form method="post">

<select name="ageGroup" onchange="fillSelect(this,'partyType',0,['Kids','Adults','Mixed'])">
<option value="">- Age Group -</option>
<option value="A">Kids (up to 21)</option>
<option value="B">Adults (21 and up)</option>
<option value="C">Kids and Adults</option>
</select>

<select name="partyType" size="1" onchange="fillSelect(this,'theme',1)">
<option value="">- Party Type -</option>
</select>

<select name="theme">
<option value="">- Party Theme -</option>
</select>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

Any ideas ? Thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum