By William Bontrager
You've probably seen examples of dropdown
listboxes on a page where the content of one
listbox is changed whenever a different
selection is made in another listbox.
This article and demonstration will show you
how to do that -- without causing a web page
reload whenever a new selection is made.
When the final selection is made by the user,
the information can be submitted to a CGI
program. This article addresses both.
~~ Select a state or province in the main listbox. The
subordinate listbox then fills with names of cities
in that state, province, or region.
~~ Select a color. The subordinate listbox fills with
related colors. (The demonstration page does this.)
~~ Select a political party. The subordinate listbox
fills with a list of those running for office.
~~ Select a city. The subordinate listbox fills with
~~ Select a question. The subordinate listbox fills with
a list of possible answers to choose from.
time a new selection is made in the main
listbox, the subordinate listbox changes its
The demonstration page, with example download
links, is here. If you
like what you see, read on for a few
1. The main listbox and/or the subordinate
listbox can be a multi-select menu box by
adding the MULTIPLE attribute. And more than
one item can be shown at one time with the
SIZE attribute. Here is an example:
The main listbox and the subordinate listbox
can be part of a larger form -- subscription,
feedback, registration, survey, shopping
cart, any web page form to be processed with
3. Form and Listbox Names:
The form must have a name and the subordinate
those names to fill the subordinate listbox
with dynamic content. The main listbox name
is optional in this case.
If your CGI program requires that the form or the
subordinate listbox have certain specific names, or
you just want to change the names from those in the
settings where those names can be specified. You
won't otherwise have to search and change the code.
Initial Listbox Size:
Some browsers won't make a listbox larger
than it was when the page was first loaded,
even if the content won't all fit. Therefore,
make the "empty" subordinate list
box in your HTML source code large enough so
any of the dynamic content will fit.
This means, you'll need one line at least as
long as the longest line of any of the
dynamic content. And, you'll need the number
of options that the deepest dynamic content
Here is an "empty" listbox with
represents the longest line.</option>
selection is made in the subordinate listbox:
function (found near the bottom of the code).
2. Replace the entire body of the function with the
code you want to run. Examples of what one might
do with the function:
~~ Provide an alert box with a "right" or "wrong"
message in response to an answer selected.
~~ Provide an alert box with the telephone number
of the store selected.
~~ Provide a popup box with the name of the opposing
political candidate, along with shortcomings,
when a political candidate is selected.
~~ Redirect the browser to a page designed with the
~~ Pop up a map of the city or region selected.
second selection is made, you can either
a. Replace the entire body of the DoSomething()
function with this line:
b. Remove the onChange="DoSomething(...) attribute
from the subordinate listbox's SELECT tag.
6. CGI Result:
To submit to a CGI program:
1. Put the CGI program's URL into the FORM tag with
the ACTION attribute. If the CGI program requires
that the POST method be specified, use the METHOD
attribute to do that. Example:
2. Give the form a submit button.
would, of course, already have a CGI program
installed to process the form results.
Letting one list box change the /images of
another -- it's so easy once a person knows
how to do it :)
About the Author: