PDA

View Full Version : building cascading drop down boxes

dkeppie
08-23-2002, 10:17 PM
I have built a spreadsheet in MS Excel whereby selection of an option from the master drop down box populates three other drop down boxes as part of a form to be emailed. This must be made into a web page.

I have been looking at the single/double combo drop-down boxes and need something along the same but they tend to be built around the assumption that each drop down box is dependent on the selection of the previous.

Attached is a txt file that should illustrate what I'm after.

Box 1-4 are four drop down boxes.
Alphabetical letters represent the option values that are populated after intial selection of A,B or C from box 1.

1|2 |3 | 4
A|D |E-G|H,I
B|J-P |E-G|Q-W
C|D |D |Y

For example, selecting A from box 1 would populate value D in box 2, values E thru G in box 3, and values H and I in drop down box 4.

I can follow javascript but have a terrible time writing from scratch. Any help on this matter would be most appreciated.
Best regards.
beetle
08-24-2002, 06:41 AM
This seems to do the trick<html>
<head>
<title>Test</title>
<script>
var selData = new Array();
selData['A'] = new Array('D','E,F,G','H,I');
selData['B'] = new Array('J,K,L,M,N,O,P','E,F,G','Q,R,S,T,U,V,W');
selData['C'] = new Array('D','D','Y');

function setSelects(val) {
var sel2 = document.getElementById('select2');
var sel3 = document.getElementById('select3');
var sel4 = document.getElementById('select4');

var vals2 = selData[val][0].split(/\,/);
var vals3 = selData[val][1].split(/\,/);
var vals4 = selData[val][2].split(/\,/);

addOptions(sel2, vals2);
addOptions(sel3, vals3);
addOptions(sel4, vals4);
}

function addOptions(obj, values) {
while (obj.hasChildNodes())
obj.removeChild(obj.lastChild);
for (var i in values) {
var o = document.createElement("option");
o.setAttribute("value",values[i]);
var txt = document.createTextNode(values[i]);
obj.appendChild(o);
o.appendChild(txt);
}
}

</script>
</head>
<body>

<form action="test.htm" method="get">
<select id="select1" name="select1" onChange="setSelects(this.options[this.selectedIndex].value)">
<option selected>---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select id="select2" name="select2">
<option selected>---</option>
</select>

<select id="select3" name="select3">
<option selected>---</option>
</select>

<select id="select4" name="select4">
<option selected>---</option>
</select>
<input type="submit" value="go">
</form>
</body>
</html>
dkeppie
08-26-2002, 08:24 PM
working like a charm. simple and pretty straightforward when i look at it.
many thanks.