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

原创 2005年04月22日 16:41:00
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.

Click Here.

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.

1.4 Dynamically change the look of an application by using view states,transitions and effects


Some points about postback and multi-language drop down list

/*By Jiangong SUN*/ Cultures.ascx.cs: public partial class Cultures : System.Web.UI.UserCo...

How do I add new state and change the workflow of Purchase Order?


unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果

在之前人皮肤实时渲染的基础之上添加了血液覆盖效果(blood effect)和水珠滴落效果...
  • wolf96
  • wolf96
  • 2015年03月22日 14:21
  • 3496

Ajax Upload; A file upload script with progress-bar, drag-and-drop

An older ajax upload plugin, which only used iframe for uploads, and was licensed under MIT license ...

图书推荐——Image Analysis, Classification, and Change Detection in Remote Sensing With Algorithms

图书特点 ·      简明介绍所需的数学和统计背景知识 ·      深度介绍非线性数据分析方法,包括支持向量机等 ·      详细介绍多变量变化检测及软件的实现 ·      提供每...
  • esricd
  • esricd
  • 2012年06月25日 20:02
  • 1669
您举报文章:Application Design: Dynamically change state and city drop-down boxes with DHTML