473,700 Members | 2,732 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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="javas cript">
var phaseArray = new phaseArray(4);
var phaseTypeId = new phaseTypeId(4);
var phaseId = new phaseId(4);

phaseArray[0] = "Define";
phaseId[0] = "phs_2003000000 01";
phaseTypeId[0] = "pht_2003000000 01";

phaseArray[1] = "Measure";
phaseId[1] = "phs_2003000000 02";
phaseTypeId[1] = "pht_2003000000 01";
phaseArray[2] = "Analyze";
phaseId[2] = "phs_2003000000 03";
phaseTypeId[2] = "pht_2003000000 01";

phaseArray[3] = "Project Start-Up";
phaseId[3] = "phs_2003000000 06";
phaseTypeId[3] = "pht_2003000000 02";
function populateMenu(s) {
//document.write( phastTypeId[1]);
//document.write( s);

var i=0,j=1;
document.overvi ew.phase.option s.length = 1; //delete current
options
document.overvi ew.phase.option s[0].selected = true;
for (var i=0; i<phaseArray.le ngth; i++){
if(s == phaseTypeId[i]) {
document.overvi ew.phase.option s.length = j;
document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
document.overvi ew.phase.option s[j].value = phaseId[i];
//if( == phaseArray[i])
// document.search Form.metroID2.o ptions[j].selected = true;
j++;
}
}
}

</script>
<body>

<form name="overview" id="overview" action="test2.j sp"
method="post">
<select name="phaseType "
onChange="popul ateMenu(documen t.overview.phas eType.options[document.overvi ew.phaseType.op tions.selectedI ndex].value);">
<option value="-1">- select phase -</option>
<option value="pht_2003 00000001">Phase 1</option>
<option value="pht_2003 00000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:10 0px;">
<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 15415

"Greg Scharlemann" <gr**@dreamatla ntic.com> wrote in message
news:81******** *************** ***@posting.goo gle.com...
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="javas cript">
var phaseArray = new phaseArray(4);
var phaseTypeId = new phaseTypeId(4);
var phaseId = new phaseId(4);

phaseArray[0] = "Define";
phaseId[0] = "phs_2003000000 01";
phaseTypeId[0] = "pht_2003000000 01";

phaseArray[1] = "Measure";
phaseId[1] = "phs_2003000000 02";
phaseTypeId[1] = "pht_2003000000 01";
phaseArray[2] = "Analyze";
phaseId[2] = "phs_2003000000 03";
phaseTypeId[2] = "pht_2003000000 01";

phaseArray[3] = "Project Start-Up";
phaseId[3] = "phs_2003000000 06";
phaseTypeId[3] = "pht_2003000000 02";
function populateMenu(s) {
//document.write( phastTypeId[1]);
//document.write( s);

var i=0,j=1;
document.overvi ew.phase.option s.length = 1; //delete current
options
document.overvi ew.phase.option s[0].selected = true;
for (var i=0; i<phaseArray.le ngth; i++){
if(s == phaseTypeId[i]) {
document.overvi ew.phase.option s.length = j;
document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
document.overvi ew.phase.option s[j].value = phaseId[i];
//if( == phaseArray[i])
// document.search Form.metroID2.o ptions[j].selected = true;
j++;
}
}
}

</script>
<body>

<form name="overview" id="overview" action="test2.j sp"
method="post">
<select name="phaseType "
onChange="popul ateMenu(documen t.overview.phas eType.options[document.overvi ew
..phaseType.opt ions.selectedIn dex].value);"> <option value="-1">- select phase -</option>
<option value="pht_2003 00000001">Phase 1</option>
<option value="pht_2003 00000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:10 0px;">
<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**@dreamatlan tic.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="javas cript">
<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.overvi ew.phase.option s.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.overvi ew.phase.option s[0].selected = true; document.overvi ew.phase.option s.length = j;
document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
document.overvi ew.phase.option s[j].value = phaseId[i];
These three lines can be written:
document.....op tions[j] = new Option(phaseArr ay[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/rasterTriangleD OM.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="javas cript">
var phaseArray = new Array(4);
var phaseTypeId = new Array(4);
var phaseId = new Array(4);

phaseArray[0] = "Define";
phaseId[0] = "phs_2003000000 01";
phaseTypeId[0] = "pht_2003000000 01";

phaseArray[1] = "Measure";
phaseId[1] = "phs_2003000000 02";
phaseTypeId[1] = "pht_2003000000 01";
phaseArray[2] = "Analyze";
phaseId[2] = "phs_2003000000 03";
phaseTypeId[2] = "pht_2003000000 01";

phaseArray[3] = "Project Start-Up";
phaseId[3] = "phs_2003000000 06";
phaseTypeId[3] = "pht_2003000000 02";
function populateMenu(s) {
var i=0,j=1;
document.overvi ew.phase.option s.length = 1; //delete current
options
document.overvi ew.phase.option s[0].selected = true;
for (var i=0; i<phaseArray.le ngth; i++){
if(s == phaseTypeId[i]) {
document.overvi ew.phase.option s.length = j;
document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
document.overvi ew.phase.option s[j].value = phaseId[i];
if("phs_2003000 00006" == phaseId[i])
document.overvi ew.phase.option s[j].selected = true;
j++;
}
}
}

</script>
</head>
<body>

<form name="overview" id="overview" action="test2.j sp"
method="post">
<select name="phaseType "
onChange="popul ateMenu(documen t.overview.phas eType.options[document.overvi ew.phaseType.op tions.selectedI ndex].value);">
<option value="pht_2003 00000001">Phase 1</option>
<option selected value="pht_2003 00000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:10 0px;">
<option></option>
</select>
</form>
<script>populat eMenu("phs_2003 00000006");</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="javas cript">
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_2003000000 01";
phaseTypeId[0] = "pht_2003000000 01";

phaseArray[1] = "Measure";
phaseId[1] = "phs_2003000000 02";
phaseTypeId[1] = "pht_2003000000 01";
phaseArray[2] = "Analyze";
phaseId[2] = "phs_2003000000 03";
phaseTypeId[2] = "pht_2003000000 01";

phaseArray[3] = "Project Start-Up";
phaseId[3] = "phs_2003000000 06";
phaseTypeId[3] = "pht_2003000000 02";
function populateMenu(s) {
var i=0,j=1;
document.overvi ew.phase.option s.length = 1; //delete current
options
document.overvi ew.phase.option s[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.selectedI ndex = 0;
for (var i=0; i<phaseArray.le ngth; i++){
if(s == phaseTypeId[i]) {
If the variable above is used, the code below could be shortened to:

phase.options.l ength = j;
phase.options[j] = new Option(phaseArr ay[i]);

....and so on.
document.overvi ew.phase.option s.length = j;
document.overvi ew.phase.option s[j] = new
Option(phaseArr ay[i]);
document.overvi ew.phase.option s[j].value = phaseId[i];
if("phs_2003000 00006" == phaseId[i])
document.overvi ew.phase.option s[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.selectedI ndex = j;
j++;
}
}
}

</script>
</head>
<body>

<form name="overview" id="overview" action="test2.j sp"
method="post">
<select name="phaseType "
onChange="popul ateMenu(documen t.overview.phas eType.options[docume
nt.overview.pha seType.options. selectedIndex].value);">
<option value="pht_2003 00000001">Phase 1</option>
<option selected value="pht_2003 00000002">Phase 2</option>
</select><br />
<select name="phase" id="phase" style="width:10 0px;">
<option></option>
</select>
</form>
<script>populat eMenu("phs_2003 00000006");</script>
This script must have a type attribute like the one above.
</body>
</html>


Hope that helps,

Mike

--
Michael Winter
M.******@blueyo nder.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.******@blueyo nder.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 HTMLOptionEleme nt 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"'.
????
!!!!!!!11111111 11 [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 HTMLOptionsColl ection is inefficient, one should
then access the `selectedIndex' property of the HTMLSelectEleme nt
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2302
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 problem I have is how can I submit the id from the first level menu in order to make the query and create the second level and so on menu. I am trying to avoid Javascript but I can't see another way at the moment... What I want to achieve is to...
1
6359
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 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>...
2
3189
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.
3
3049
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 DropDownHelper(menuArray, top, left, height) { var currItem = new String(); var item; var idStr;
19
258994
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. For example, the first menu has three cities London, Paris, New York. If I choose London it populates the second menu with people from London. Here is the code I have for my dynamic menu <td valign=top><strong>Name:</strong></td> <td>...
6
8301
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 information I want by doing a Response.write. I am having problems dynamically creating a drop down list from the data in the recordset. The drop down is created but it is empty. Any help would be greatly appreciated. A sample of the code: <% 'On...
5
4004
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 Fields Names: countrycode, make
10
57037
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 what is shown in the dynamic menu. For example, the first menu has three cities London, Paris, New York. If I choose London it populates the second menu with people from London. Here is the code I have for my dynamic menu <td...
0
8721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8642
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9069
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8964
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8918
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5900
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4653
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2385
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2024
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.