The JavaScript Source: Forms : Auto Drop Down

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Automatically adjusts the values in the selection box depending on the item selected in the drop down menu. Awesome!

Notes

Created by: Jerome Caron
Posted: March 23, 2001

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoDropDown.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jerome Caron |  */
team = new Array(
new Array(
new Array("Saku Koivu", 39482304),
new Array("Martin Rucinsky", 34802389),
new Array("Jeff Hackett", 39823498),
new Array("Sheldon Sourray", 87587343),
new Array("Richard Zednik", 68798735),
new Array("Brian Savage", 98098509),
new Array("Stephane Robidas", 49490583),
new Array("Patrice Brisebois", 32898334),
new Array("Oleg Petrov", 92340934),
new Array("Chad Kilger", 34923409),
new Array("Benoit Brunet", 59384093),
new Array("Jan Bulis", 83948023),
new Array("Patrick Traverse", 41239812),
new Array("Jose Theodore", 98402398),
new Array("Craig Darby", 82393434),
new Array("Patric Poulin", 34290348),
new Array("Karl Dykhuis", 89092834)
),
new Array(
new Array("Mario Lemieux", 23840238),
new Array("Jaromir Jagr", 92390484),
new Array("Robert Lang", 29048203),
new Array("Alexei Kovalev", 94098230),
new Array("Jean-Sebastien Aubin", 39234923),
new Array("Kevin Stevens", 29345423)
),
null,
new Array(
new Array("Alexei Yashin", 20394802),
new Array("Daniel Alfredson", 34982039),
new Array("Marian Hossa", 92348902),
new Array("Patrick Lalime", 98203894),
new Array("Radek Bonk", 98234902)
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
   }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="autoDropDown.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="main">
<select name="Make" onchange="fillSelectFromArray(this.form.Team, ((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]));">
<option value="-1">Select Team
<option value="1">Montreal Canadiens
<option value="2">Pittsburg Penguins
<option value="3">Toronto Maple Leafs
<option value="4">Ottawa Senators
</select>
<br>
<select name="Team" size="5">
<option>                                  </option>
<option>                                  </option>
<option>                                  </option>
<option>                                  </option>
<option>                                  </option>
</select>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

12. From: Boris
Numbers After Names
01/19/2008 21:23:45

13. From: Lee Underwood (Admin)
01/29/2008 13:08:28

10. From: WzCocoon
is it possible to adda 3rd options?
12/20/2007 02:10:03

11. From: Lee Underwood (Admin)
01/29/2008 11:53:19

9. From: Niloy
10/04/2007 14:28:27

8. From: Patrice
Awesome!
10/04/2007 09:51:27

7. From: Laura
auto drop down without the select option?
07/26/2007 11:45:09

5. From: Philippe Sambor
The same with Ajax ?
06/13/2007 11:31:04

6. From: Lee (Admin)
07/10/2007 15:35:48

3. From: Richard
05/14/2007 17:50:08

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

12. From: BorisNumbers After Names01/19/2008 21:23:45

13. From: Lee Underwood (Admin)01/29/2008 13:08:28

10. From: WzCocoonis it possible to adda 3rd options?12/20/2007 02:10:03

11. From: Lee Underwood (Admin)01/29/2008 11:53:19

9. From: Niloy10/04/2007 14:28:27

8. From: PatriceAwesome!10/04/2007 09:51:27

7. From: Lauraauto drop down without the select option?07/26/2007 11:45:09

5. From: Philippe SamborThe same with Ajax ?06/13/2007 11:31:04

6. From: Lee (Admin)07/10/2007 15:35:48

3. From: Richard05/14/2007 17:50:08

12. From: Boris
Numbers After Names
01/19/2008 21:23:45

13. From: Lee Underwood (Admin)
01/29/2008 13:08:28

10. From: WzCocoon
is it possible to adda 3rd options?
12/20/2007 02:10:03

11. From: Lee Underwood (Admin)
01/29/2008 11:53:19

9. From: Niloy
10/04/2007 14:28:27

8. From: Patrice
Awesome!
10/04/2007 09:51:27

7. From: Laura
auto drop down without the select option?
07/26/2007 11:45:09

5. From: Philippe Sambor
The same with Ajax ?
06/13/2007 11:31:04

6. From: Lee (Admin)
07/10/2007 15:35:48

3. From: Richard
05/14/2007 17:50:08