Dynamic populate drop down menu

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[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

Subscribe Post Reply

15376

Chris

"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

Lasse Reichstein Nielsen

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

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[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

Michael Winter

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

Thomas 'PointedEars' Lahn

@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

Similar topics

Dynamic Menu CSS - PHP

by: Angelos | last post by:

Hello there... I am trying for a long time now, to find a way of creating a dynamic drop down menu. I have the CSS part ready and working and also I have the first level of the menu working. the...

PHP

Automatically populate drop down menu

by: Greg Scharlemann | last post by:

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...

Javascript

dynamic option menu

by: Jorntk | last post by:

How can I make a drop down menu that are dynamically generated base on the value selected in another drop down menu? values in both menu will need to be from mysql query.

Javascript

dynamic drop-down menu

by: scaredemz | last post by:

hi, so i'm creating a dynamic drop-down menu. the menu and the text show up fine in IE but only the drop-down shows in Firefox without the menu text. Below is the fxn code. help pls. function...

Javascript

PHP - Dynamic Drop Down Menu

by: mart2006 | last post by:

I've created a dynamic drop down menu that populates itself with data from a MySQL table. What I would like to do is create a non dynamic drop down menu that alters what is shown in the dynamic menu....

PHP

Dynamic drop down list

by: mcgrew.michael | last post by:

I hope this is the right group. I am very new to ASP so this is probably a stupid question. I have some vbscript that query's AD and populates a recordset. I know the recorset contains the...

ASP / Active Server Pages

Populate Pull down menu from access database on selection of previous pull down menu

by: giandeo | last post by:

Hello Experts. Could you find a solution for this problem please! I have the following tables in Access Database Table Name: origin Fields Names: country, countrycode Table Name: make...

Javascript

Dynamic Drop Down Menu

by: mart2006 | last post by:

Hi, I'm fairly new to PHP and I've created a dynamic drop down menu that populates itself with data from a MySQL table. What I would like to do is create a non dynamic drop down menu that alters...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware