Linked drop down boxes with Ajax

If you haven’t heard about Ajax, you probably come from another planet! Ajax is a Web 2.0 approach to building Web applications that allows you to load data from an external source asynchronously using JavaScript. Asynchronous loading means that the user can carry on interacting with the Web application whilst data loads in the background. For this reason, it’s often said that Ajax makes applications more responsive, like desktop applications.

This tutorial is all about drop down boxes in a form that are populated using an Ajax approach. Ajax most often works with XML documents although it can also deal with text files. We’ll work through an example here where we load a drop down box and, depending on the value we select, we’ll populate a second drop down box with related entries. The example we’ll use is a list of countries. When we select a country, a second drop down box will show the states or provinces in the selected country.

In a Web 1.0 version of this application, we’d probably have to reload the page each time the user selected a country from the first drop down box. They’d have to wait to see the second drop down populated with the list of states. In our Web 2.0 approach, the second drop down will appear to populate almost instantly.

As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it and make it work correctly.

So you know, this code represents one way to achieve our aim of having linked drop down boxes. I’m sure there are other ways you could have achieved the same thing. I tested the example here in IE 6 and Firefox 1.5 so my screen shots will show both browsers.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.