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
When the final selection is made by the user, you can have
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.
Every time a new
selection is made in the main listbox, the subordinate listbox
changes its /images.
The demonstration page, with example download links, is here.
If you like what you see, read on for a few installation pointers.
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:
2. The main listbox and
the subordinate listbox can be part of a larger form --
subscription, feedback, registration, survey, shopping cart, any
3. Form and Listbox Names:
The form must have a name and the subordinate listbox must have a
listbox with dynamic content. The main listbox name is optional in
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.
4. Initial Listbox
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
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 would have.
Here is an "empty" listbox with five options:
<option value="">This represents the longest
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.
If you do not want to
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.
You 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: