Changing HTML Dropdown Box Content On-the-Fly (Without
Reloading the Web Page)
You've seen web pages with two dropdown
lists where making a selection in one causes the web page to reload. Once
reloaded, the list in the other dropdown has changed.
This article is about changing the contents of the second dropdown list
but without reloading the web page.
Now that page reloads aren't necessary, the content of dropdown lists can
be changed on-the-fly without annoying visitors and potential customers in
The demonstration (link below) contains an example of a primary dropdown
list changing the content of a secondary dropdown list. These two dropdowns
are meant to be put into various types of forms, although they might also
be used by themselves.
The dual dropdowns could be used as a site navigation aid. The primary dropdown
could have the main sections of a web site as selections. When a selection
is made, the secondary dropdown list content is changed to contain subsections.
For example, "Books" might cause the secondary dropdown to contain a list
The technique might be used on an e-commerce site where sub-selections are
necessary. For example, size 12 shirts might come in colors red and blue,
and size 10 come in red, blue, yellow, and white. The size selection of the
primary dropdown would change the color selections within the secondary dropdown.
When playing with the demonstration, you'll undoubtedly see potential for
your web sites, maybe immediate applications. It's at
The above demonstration page has a download link for a ZIP file of code and
Now, you can have a dynamic dropdown list without annoying visitors with
Copyright 2004 Bontrager Connection, LLC
About the Author: