Sample Coding:
<script>
<!--
var plabels = new Array();
var parents = new Array();
var family = new Array();
parents[0] = new Array(
"Parent 0 - children 1",
"Parent 1 - children 2",
"Parent 2 - children 3");
parents[1] = new Array(
"Parent 1 - children 1",
"Parent 1 - children 2",
"Parent 1 - children 3",
"Parent 1 - children 4");
parents[2] = new Array(
"Parent 2 - children 1",
"Parent 2 - children 2");
parents[3] = new Array(
"Parent 3 - children 1",
"Parent 3 - children 2",
"Parent 3 - children 3");
parents[4] = new Array(
"Parent 4 - children 1",
"Parent 4 - children 2",
"Parent 4 - children 3",
"Parent 4 - children 4");
for (i=0; i<5; i++) {
plabels[i] = "Parent " + i;
}
function fillParents() {
var pList = document.frm.parent;
for (i=0; i<plabels.length; i++) {
pList.options[i+1] = new Option(plabels[i], i);
}
}
function fillChilds() {
var pObj = document.frm.parent;
var cObj = document.frm.child;
var parent = pObj.options[pObj.selectedIndex].value;
var childs = parents[parent];
cObj.length = 0;
for (i=0; i<childs.length; i++) {
cObj.options[i+1] = new Option(childs[i], i);
}
cObj.options[0] = new Option("- Please specify -", "", false, true);
}
//-->
</script>
<p>Dynamic pull-down boxes</p>
<form name="frm" method="post">
<p>Parent:
<select name="parent" onchange="fillChilds()">
<option value="">- Please specify -</option>
</select>
<p>Children:
<select name="child">
<option value="">- Please specify -</option>
</select>
</form>
<script>
<!--
fillParents();
//-->
</script>
