Application Design: Dynamically change state and city drop-down boxes with DHTML

State and city drop-down boxes are a perfect opportunity to use JavaScript. Each state has a limited number of corresponding cities, so why not make the city drop-down box update itself every time a new state is chosen. The only problem with writing a strictly JavaScript approach is that you would have to write over 30,000 lines of code to match each and every single state/city option. While this may be fun for some, most of us have better things to do, like perhaps code the rest of the form.

ColdFusion is tailor-made to interact with databases, particularly one that has state and city data. A 30,000-row recordset is a drop in the bucket to the ColdFusion server.

Now if only we could get the ColdFusion and JavaScript to talk…

The code, version 1: Joint ColdFusion/JavaScript dynamic Web page
The code to generate the page is very simple. It is comprised of about 50 lines which are broken into three sections: the ColdFusion queries, the form with drop-downs, and the JavaScript code (enhanced with a bit of ColdFusion) to facilitate the switching.

The queries
The first section of code is comprised of two queries ( Listing A). The first query goes to the table(s) in the database to get every distinct city-state combination. The second query is merely a subset of data from the first query to find all the distinct states.

The form with drop-downs
Next, we take a look at the form ( Listing B). This form is a simple form comprised of just the two drop-down boxes in question: one for state and the other for city.

Note that you utilize the allStates query declared in Listing A to create the <select> box options for the state drop-down. There's no sense in typing it manually when ColdFusion let's you create it so easily. The city drop-down box is purposefully left empty because when you first load the page, there is no state selected, which means there is no city list to show.

The JavaScript (enhanced with ColdFusion)
As you can see in Listing C, the JavaScript is enhanced by a bit of ColdFusion code.

Let's tackle this JavaScript and further explain it.
var NumberOfStates=document.city_state.state_id.options.length

In this first line, you figure out how many states you have in the drop-down.
var CityStateArray=new Array(NumberOfStates)
CityStateArray[0]=new Array()
CityStateArray[0][0]=new Option("Select a city...","")

Here you create a new array with as many elements as you have states. Next, you hit the array logic. The first logical element is actually at the zero index of the array.

An easy way to think of this is to look at your arms. You have two arms. "Arm #1" and "Arm #2" are the two labels you usually use to describe them, when labels "Arm #0" and "Arm #1" would work just as well. A two-element array in JavaScript is referenced as follows: If temparray is the array name, then temparray[0] is the first element and temparray[1] is the second.

Next, the second line above takes the first element in the CityStateArray and creates a new array. The third line then creates an array within an array. Going back to the arm analogy, you can think of the "arms" array as having two elements, arms[0] and arms[1]. Now, arms[0] is an array element but it has five fingers. Therefore, you could reference each finger as arms[0][0], arms[0][1], and so on until arms[0][4]. In plain speak, the third line above states, since the first element in the drop-down for state says, "Select a state…", then the first option in city should say, "Select a city…."

The code shown in Listing D is where you integrate ColdFusion code with the JavaScript. The <cfloop> tag tells ColdFusion to start at the first state and do everything contained within the <cfloop> tag until you reach the total number of states. For each state, you create a new CityStateArray element. Then you select every city that matches that state from the city_state query. You then add that city as an option element in your embedded array.

Notice the JSStringFormat function calls around the output of the city names. The reason for this is cities with apostrophes in them, i.e. John's Port. That apostrophe will crash your JavaScript fast and hard. Trust me, I found out the hard way.

Lastly, we come to the code in Listing E for the FindCities function. The first line sets up a temp variable to house the city drop-down object. Next is the function declaration for the FindCities function, which you call every time someone changes the state drop-down box. The first for loop goes through the current city drop-down options and nulls them out. The second for loop goes through your CityStateArray and creates a new option in the city drop-down for each city for the picked state. The last line merely makes the "Select a city…" the chosen option.

The code, version 2: HTML/JavaScript static Web page
If you don't run ColdFusion, don't have a database with city/state info, or don't want dynamic lists that can change over time, then just do a simple HTML/JavaScript implementation of the code. The end result of the ColdFusion/JavaScript page is an HTML/JavaScript page, since ColdFusion processes its code on the backend before returning a response to the server. You can utilize the source code of the example linked below.

The results
Click the Builder downloads link to see the final output of either two versions.

Now, the only bad thing about this bit of code is the footprint. To make this work, you need to send about two megabytes worth of data to the client. Some of you will vehemently oppose such a dastardly deed. I agree that clearly this is not an option for you to use if you have predominantly AOL dial-up users. However, two megabytes is nothing over a corporate network for an internal application or if your users are predominantly broadband users. It's all a tradeoff. One long initial download is the cost for insuring that every city you get will be one you recognize. The choice of whether it's worth it is up to you. Also, don't forget that if you don't want to list every available city in the nation, you can utilize just a subset of data to limit the choices and page size.