By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,678 Members | 2,192 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,678 IT Pros & Developers. It's quick & easy.

Automatically populate drop down menu

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
@SM
Greg Scharlemann a ecrit :
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?
for instance :

<script type="text/javascript">
function init(){ populateMenu("phs_200300000006");}
</script>
<body onload="setTimeout('init()',300);">


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]) {
// any 1st option ? to give a kind of title ...
/*
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++;
*/
with(document.overview.phase.options[i+1]){
value = phaseId[i];
text = phaseArray[i];
if("phs_200300000006" == phaseId[i]) selected = true;
}
// would be enough
}
}
}

</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);">
onChange="populateMenu(this.form.options[this.form.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


--
************************************************** ************
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephanemoriaux/internet/
************************************************** ************
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.