472,146 Members | 1,427 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > dynamic populate drop down menu

Join Bytes to post your question to a community of 472,146 software developers and data experts.

Dynamic populate drop down menu

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[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( == phaseArray[i])
// 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.
Jul 20 '05 #1
6 15254

"Greg Scharlemann" <gr**@dreamatlantic.com> wrote in message
news:81**************************@posting.google.c om...
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.
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[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( == phaseArray[i])
// 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.

Jul 20 '05 #2
gr**@dreamatlantic.com (Greg Scharlemann) writes:
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.
That's surpricing. Are you sure you have enabled error messages?

Remeber the DOCTYPE declaration (required in HTML).
<html>
Remember the <head> tag.
Remember the <title> element (required in HTML)
<script language="javascript">
<script type="text/javascript">
The type attribute is required, and is also sufficient.
var phaseArray = new phaseArray(4);
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);
Ditto ditto.
function populateMenu(s) {
//document.write(phastTypeId[1]); //document.write(s);

var i=0,j=1;
document.overview.phase.options.length = 1; //delete current options
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; document.overview.phase.options.length = j;
document.overview.phase.options[j] = new Option(phaseArray[i]);
document.overview.phase.options[j].value = phaseId[i];
These three lines can be written:
document.....options[j] = new Option(phaseArray[i],phaseId[i]);
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.


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

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3
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[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>
Jul 20 '05 #4
Greg Scharlemann wrote on 10 Dec 2003 at Wed, 10 Dec 2003 20:02:46
GMT:

<snipped description>

You should have a DOCTYPE declaration here. If you know how to write
Strict HTML (which I suggest you learn if you don't), use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

....otherwise...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
Mr Nielsen suggested in his reply to your original post that you use
the type attribute. I again recommend that you change the line above.
The type attribute is /required/. It also makes the language
attribute redundant.

<script type="text/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;
You're using the wrong property. SELECT elements have a selectedIndex
property that indicates the currently selected item. The selected
property of OPTION elements (what you have above) is used to
determine what entries are selected when SELECT is used as a list
box, rather than a drop-down box.

To make your script compatible with more browsers, you should change
how you access form elements to the collection syntax:

document.forms['overview'].elements['phase'].selectedIndex = 0;

It is longer, but you could create a reference to the form, an
element, or other object early on in the script. For example,

var phase = document.forms['overview'].elements['phase'];

phase.selectedIndex = 0;
for (var i=0; i<phaseArray.length; i++){
if(s == phaseTypeId[i]) {
If the variable above is used, the code below could be shortened to:

phase.options.length = j;
phase.options[j] = new Option(phaseArray[i]);

....and so on.
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;
This should also be changed to use selectedIndex:

document.forms['overview'].elements['phase'].selectedIndex = j;

or, if you use the phase variable above:

phase.selectedIndex = j;
j++;
}
}
}

</script>
</head>
<body>

<form name="overview" id="overview" action="test2.jsp"
method="post">
<select name="phaseType"
onChange="populateMenu(document.overview.phaseType .options[docume
nt.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>
This script must have a type attribute like the one above.
</body>
</html>


Hope that helps,

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk")
Jul 20 '05 #5
@SM
Michael Winter a ecrit :
You're using the wrong property. SELECT elements have a selectedIndex
property that indicates the currently selected item. The selected
property of OPTION elements (what you have above) is used to
determine what entries are selected when SELECT is used as a list
box, rather than a drop-down box.
????
when I do a select menu (no size)
if I put the selected on third item
this item appears in head (as title of select menu)

It seems to work same if JS changes

Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk")


--
************************************************** ************
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr

Jul 20 '05 #6
@SM wrote:
Michael Winter a ecrit :
You're using the wrong property. SELECT elements have a
selectedIndex property that indicates the currently selected item.
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.
The selected property of OPTION elements (what you have above) is
used to determine what entries are selected when SELECT is used as
a list box, rather than a drop-down box.

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"'.
????
!!!!!!!1111111111 [1]
It seems to work same if JS changes
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? ;-))
--


....
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.
--
http://pointedears.de.vu/scripts/
Jul 20 '05 #7

This discussion thread is closed

Start new discussion

Replies have been disabled for this discussion.

Similar topics

PHP
Dynamic Menu CSS - PHP
2 posts views Thread by Angelos | last post: by
Automatically populate drop down menu
1 post views Thread by Greg Scharlemann | last post: by
dynamic option menu
2 posts views Thread by Jorntk | last post: by
dynamic drop-down menu
3 posts views Thread by scaredemz | last post: by
PHP
PHP - Dynamic Drop Down Menu
19 posts views Thread by mart2006 | last post: by
Dynamic drop down list
6 posts views Thread by mcgrew.michael | last post: by
Dynamic Drop Down Menu
10 posts views Thread by mart2006 | last post: by
Creating a social network (help)
reply views Thread by Saiars | last post: by
openGauss security policy
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates