 Changing HTML Dropdown Box Content On-the-Fly (Without
Reloading the Web Page)
By
William
Bontrager
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.
It's done with JavaScript.
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
that way.
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
of genres.
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
http://willmaster.com/a/24t/pl.pl?art244
The above demonstration page has a download link for a ZIP file of code and
instructions.
Now, you can have a dynamic dropdown list without annoying visitors with
page reloads.
Will Bontrager
Copyright 2004 Bontrager Connection, LLC
About the Author:
|
|
Web
Development
