You are creating a form on your website, and need to populate the contents of a selection box in the form based on the choice made in a dropdown field. Sound difficult? This tutorial will show you how you can add this functionality using JavaScript!
To accomplish this type of interactive form you just need a little JavaScript. Fortunately developer Jerome Caron has already done the work for you. To save you, our busy reader, from cutting and pasting, we’ve provided you with a zip file containing all the files you’ll need (just two). The first file is the JavaScript file itself, which we will reference externally, and the HTML file which contains the form. You can incorporate the form into your own pages, as we will show you. To see the form in action, check out this example page.
The JavaScript Selection Box Code
For our example, we have used a dropdown field which contains four selections: Famous Comedians, Music Groups, Presidents and Magicians. Here is the actual JavaScript code used:
//create the arrays
group = new Array(
new Array(
new Array("Sam Kenison", 39482304),
new Array("Jerry Lewis", 34802389),
new Array("Jerry Seinfeld", 39823498),
new Array("Richard Pryor", 87587343),
new Array("CarrotTop", 68798735),
new Array("Jeff Foxworthy", 98098509)
),
new Array(
new Array("Disturbed", 23840238),
new Array("The Beatles", 92390484),
new Array("Godsmack", 29048203),
new Array("Green Day", 94098230),
new Array("Lil Wayne", 39234923),
new Array("Black Sabbath", 29345423)
),
new Array(
new Array("Richard Nixon", 23840238),
new Array("Jimmy Carter", 92390484),
new Array("George Washington", 29048203),
new Array("Gerald Ford", 94098230),
new Array("Bill Clinton", 39234923),
new Array("George Bush", 29345423)
),
new Array(
new Array("David Copperfield", 20394802),
new Array("Harry Houdini", 34982039),
new Array("Criss Angel", 92348902),
new Array("David Blaine", 98203894),
new Array("Darren Brown", 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;
}
}
How To Add Additional Arrays
As you can see, you will need to create a JavaScript array for each selection in your dropdown. The first selection is null, that is, it contains no values. There is an array for each potential selection. When the user makes a selection from the dropdown, the selection box is filled up with its associated array of items. To add an additional array, you’ll need to add the appropriate array within the array code, as shown here:
new Array(
new Array("first selection", 23840238),
new Array("second selection", 92390484),
new Array("third selection", 29048203),
new Array("forth selection", 94098230),
new Array("fifth selection", 39234923),
new Array("sixth selection", 29345423)
),
You can also remove arrays, just be sure to be careful with the comma at the end–the last array does not have a comma at the end. If it stops working, that’s the first place to look for the problem. Also note that when this form is submitted, the information you will receive from the form submission will show you the group that was selected (i.e. Group Selection = 2) and the information from within that array (i.e. Group=23840238). You can change it to show the actual selection by simply changing the numbers in the arrays to text values for simplicity.
Here is the code you’ll use on your web page for the form.
First, you’ll need to include the JavaScript file itself. To save loading time, we’re using an external JavaScript file, rather than just including the JavaScript itself within the HTML page. You’ll do this within the HEAD section of the web page, like this:
<head> <script type="text/javascript" src="autoDropDown.js"></script> </head>
What About the Form Itself?
Now for the form. You’ll notice in the HTML code below, we’ve added a bunch of non-breaking spaces ( ). We’ve done this to make the selection box fill the space in the form, rather than starting out practically invisible due to being empty. Although this isn’t necessary, it makes the form look better and shows the user that they can expect something to be in the selection box at some point. This can be accomplished other ways, such as using CSS, however for our example, we’ll stick to the KISS method (Keep It Simple Stupid).
<form name="main"> <select name="Group Selection" onchange="fillSelectFromArray(this.form.Group, ((this.selectedIndex == -1) ? null : group[this.selectedIndex-1]));"> <option value="-1">Select Group <option value="1">Famous Comedians <option value="2">Music Groups <option value="3">Presidents <option value="4">Magicians </select> <P> <select name="Group" size="5"> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select> </form>
Your form can be as simple or as complex as you need it to be. By using such a process, you are able to narrow your visitor’s selections down based on their previous choices. This can also be done using other form fields, such as checkboxes, text fields, etc. but we’ll leave that for another tutorial!
