I would like to automatically populate a drop down menu when the page
loads based on the selection of an item in a different drop down menu.
I made a test page that when drop down #1 changes, drop down #2
populates. Does anyone know how to get drop down #2 to populate based
on what is selected in drop down #1 when the page loads?
Here is my test code:
************************************************** **********************
<html>
<head>
<script language="javascript">
var phaseArray = new Array(4);
var phaseTypeId = new Array(4);
var phaseId = new Array(4);
phaseArray[0] = "Define";
phaseId[0] = "phs_200300000001";
phaseTypeId[0] = "pht_200300000001";
phaseArray[1] = "Measure";
phaseId[1] = "phs_200300000002";
phaseTypeId[1] = "pht_200300000001";
phaseArray[2] = "Analyze";
phaseId[2] = "phs_200300000003";
phaseTypeId[2] = "pht_200300000001";
phaseArray[3] = "Project Start-Up";
phaseId[3] = "phs_200300000006";
phaseTypeId[3] = "pht_200300000002";
function populateMenu(s) {
var i=0,j=1;
document.overview.phase.options.length = 1; //delete current
options
document.overview.phase.options[0].selected = true;
for (var i=0; i<phaseArray.length; i++){
if(s == phaseTypeId[i]) {
document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray[i]);
document.overview.phase.options[j].value = phaseId[i];
if("phs_200300000006" == phaseId[i])
document.overview.phase.options[j].selected = true;
j++;
}
}
}
</script>
</head>
<body>
<form name="overview" id="overview" action="test2.jsp"
method="post">
<select name="phaseType"
onChange="populateMenu(document.overview.phaseType .options[document.overview.phaseType.options.selectedIndex].value);">
<option value="pht_200300000001">Phase 1</option>
<option selected value="pht_200300000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:100px;">
<option></option>
</select>
</form>
<script>populateMenu("phs_200300000006");</script>
</body>
</html>
************************************************** ********
Thanks
