Auto Drop Down

Jerome Caron Mar 23, 2001

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://www.javascriptsource.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>

Leave a Response

(19 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

I'm pretty sure this would help me If I got it to work. :][br /]I'm a some-what beginner at web-design and my client wants a auto-drop down menu.[br /]But I have no idea how to even get this to work :[[br /][br /]It's not visable at all.[br /]If you can offer help that would be AWESOME.

Kevin Jul 30, 2008

How if I want to insert the values without insert them one by one inside the code?[br /]I mean, just get them from database?[br /]Thank You

deean Jun 2, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Auto Drop Down

General

Notes

Source Code

External file

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper