Dynamic populate drop down menu

  • Thread starter Greg Scharlemann
  • Start date
G

Greg Scharlemann

I am attempting to populate a drop down menu based on the selection of
a different drop down menu. However, it is not working correctly, I
cannot figure out for the life of me what exactly happens because I am
not getting any errors on the page.

<html>
<script language="javascript">
var phaseArray = new phaseArray(4);
var phaseTypeId = new phaseTypeId(4);
var phaseId = new phaseId(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) {
//document.write(phastTypeId[1]);
//document.write(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) {
document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray);
document.overview.phase.options[j].value = phaseId;
//if( == phaseArray)
// document.searchForm.metroID2.options[j].selected = true;
j++;
}
}
}

</script>
<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="-1">- select phase -</option>
<option value="pht_200300000001">Phase 1</option>
<option value="pht_200300000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:100px;">
<option></option>
</select>
</form>
</body>
</html>

There maybe a simple solution to this. I am not extremely familiar
with Javascript and may have made some sort of syntax error. Thanks
all.
 
C

Chris

Greg Scharlemann said:
I am attempting to populate a drop down menu based on the selection of
a different drop down menu. However, it is not working correctly, I
cannot figure out for the life of me what exactly happens because I am
not getting any errors on the page.
Click to expand...

I'm not sure you've got Javascript errors switched on then, cause I got
errors on the first line of your script.
Try replacing your array declarations with:
var phaseArray = Array(4);
var phaseTypeId = Array(4);
var phaseId = Array(4);

Otherwise it seems to be doing what you want it to do.
<html>
<script language="javascript">
var phaseArray = new phaseArray(4);
var phaseTypeId = new phaseTypeId(4);
var phaseId = new phaseId(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) {
//document.write(phastTypeId[1]);
//document.write(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) {
document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray);
document.overview.phase.options[j].value = phaseId;
//if( == phaseArray)
// document.searchForm.metroID2.options[j].selected = true;
j++;
}
}
}

</script>
<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="-1">- select phase -</option>
<option value="pht_200300000001">Phase 1</option>
<option value="pht_200300000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:100px;">
<option></option>
</select>
</form>
</body>
</html>

There maybe a simple solution to this. I am not extremely familiar
with Javascript and may have made some sort of syntax error. Thanks
all.
Click to expand...
 
L

Lasse Reichstein Nielsen

I am attempting to populate a drop down menu based on the selection of
a different drop down menu. However, it is not working correctly, I
cannot figure out for the life of me what exactly happens because I am
not getting any errors on the page.
Click to expand...

That's surpricing. Are you sure you have enabled error messages?

Remeber the DOCTYPE declaration (required in HTML).
<html>
Click to expand...

Remember the <head> tag.
Remember the said:
<script language="javascript">

var phaseArray = new phaseArray(4);
Click to expand...

You probably mean
var phaseArray = new Array(4);
The above gives the error that "phaseArray is not a function" (because
it is undefined as any unassigned variable).
var phaseTypeId = new phaseTypeId(4);
var phaseId = new phaseId(4);
Click to expand...

Ditto ditto.
function populateMenu(s) {
//document.write(phastTypeId[1]);
Click to expand...
//document.write(s);

var i=0,j=1;
document.overview.phase.options.length = 1; //delete current options
Click to expand...

I recommend using the forms collection:

document.forms['overview'].elements['phase'].options.length = 1;

(you want to keep the first option, right?)
document.overview.phase.options[0].selected = true;
Click to expand...
document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray);
document.overview.phase.options[j].value = phaseId;
Click to expand...


These three lines can be written:
document.....options[j] = new Option(phaseArray,phaseId);
Assigning to a non-existing option index automatically increases
the length of the options collection.
There maybe a simple solution to this. I am not extremely familiar
with Javascript and may have made some sort of syntax error.
Click to expand...

I believe it is the problem with the arrays at the beginning.

/L
 
G

Greg Scharlemann

The problem was with the array declaration, but i do like the idea of
rewriting some of the function with the suggested syntax thanks.

I have a new question now though. I want a item in the second drop
down menu to be selected initially but its not working like I thought
it would. I added an if statement in the function and then called the
function with the value of the item that I want initially
selected...but the drop down menu doesn't even get populated anymore.
How do I get it to populate the second drop down menu on page load? I
assume once that works, the setting the selected = true in the
function for the second drop down menu will work as well? Thanks!

Here is the 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) {
document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray);
document.overview.phase.options[j].value = phaseId;
if("phs_200300000006" == phaseId)
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>
 
T

Thomas 'PointedEars' Lahn

@SM said:
Michael Winter a ecrit :
Click to expand...

True if the `select' element is of type `select-one' where the
`multiple' attribute is missing. Otherwise it returns the index
of the first selected option in my Mozilla/5.0, IE and Opera.

Wrong. The `selected' property of an HTMLOptionElement retrieves and
sets the select status of an option no matter how the parent select
element is displayed. The `selected' HTML attribute it corresponds to
sets the respective option to selected by default. True is only that
`select' elements *with* `multiple' attribute are displayed as a list
box rather than a drop-down box in Mozilla/5.0, IE and Opera even if
they have `size="1"'.
????
Click to expand...

!!!!!!!1111111111 [1]
It seems to work same if JS changes
Click to expand...

Selecting *one* option works this way with `select' elements of type
`select-one'. If the type is `select-multiple', you get/set the select
status of only one option, leaving the status of the other options
unchanged.

Since with type `select-one' `select' elements the additional lookup
operation within the HTMLOptionsCollection is inefficient, one should
then access the `selectedIndex' property of the HTMLSelectElement
object instead.

(Oh my, how often have I know written the words `select' or `selected'
in this posting? ;-))
--
Click to expand...

....


HTH

Pointed"select"Ears
___________
[1] Questions do not become more questioning and exclamations do not
become more exclamatory when multiplying the sentence marks.
They only suck more when reading them.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Multi select options in a menu 1
Dynamic drop down menu please help 2
Very Basic CC Validation Javascript 0
How do I get the if statement correct in the lines that has it in the program? 2
populate drop down menu 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Multiple drop down boxes with same options 0

Members online

Total: 35 (members: 3, guests: 32)
Robots: 376

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top