//, JavaScript/Changing Dropdown Content On-the-Fly (Without Reloading Web Page)

Changing Dropdown Content On-the-Fly (Without Reloading Web Page)

Changing Dropdown Content On-the-Fly (Without Reloading 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 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?art244The 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.

2010-05-26T11:33:22+00:00 April 18th, 2005|HTML, JavaScript|0 Comments

About the Author:

Leave A Comment