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.

Android:java.lang.SecurityException: Not allowed to change Do Not Disturb state

在开发过程中,需要在某个时间段将手机设为静音状态,于是乎,直接写出如下代码: if(在某个时间范围内){ setSystemSlient(); } private void setSy...
  • manjianchao
  • manjianchao
  • 2017年08月25日 16:09
  • 1526

myeclipse 启动tomcat时报错:Cannot change deployment state from ERROR to REDEPLOYING.ds

错误 : 无改将部署状态从"错误"变成"重新部署"状态。 解决办法: 右击“项目名” –> MyEclipse –> Add and remove project deployments, 然...
  • u012922219
  • u012922219
  • 2015年01月19日 09:39
  • 4725

dhtmlxgrid 常用功能介绍

Easy skinable design ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:28
  • 954

Hive学习笔记(一)集合数据类型和文本文件数据编码

集合数据类型 集合数据类型分为STRUCT,MAP,ARRAY三种。 下面一个例子用于演示如何使用这些数据类型,这是一张虚构的人力资源应用程序的中的员工表: CREATE TABLE emp...
  • qq_22499377
  • qq_22499377
  • 2018年01月10日 10:38
  • 68

spark job一直显示Application report

[2016-12-02T15:08:15.746+08:00] [DataProcessing] [INFO] [] [org.apache.spark.Logging$class] [tid:mai...
  • wonder4
  • wonder4
  • 2016年12月02日 15:09
  • 1012

MyEclipse启动本地Tomcat出错:Cannot change deployment state from ERROR to REDEPLOYING.

错误:Cannot change deployment state from ERROR to REDEPLOYING. 解决办法: 右击“项目名” –> MyEclipse –> Add a...
  • superyu1992
  • superyu1992
  • 2015年03月20日 17:07
  • 2662

Codeforces Round #270 F Design Tutorial: Change the Goal 高斯消元

因为操作是可逆的而且可以随意交换,那么我们把每n个数消掉其他位保留最高位即可,然后判断一下。 #include #include #include #include #include #define...
  • u013665921
  • u013665921
  • 2016年08月11日 10:49
  • 189

PartitionStateMachine分析

PartitionStateMachine是Controller Leader用于维护分区状态的状态机,分区状态时PartitionState,它有四个子类: 一 分区的状态转换...
  • zhanglh046
  • zhanglh046
  • 2017年05月31日 17:23
  • 334

DHTML 大全

方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。...
  • helanye
  • helanye
  • 2009年07月11日 22:45
  • 2666

ubuntu下VMware: Unable to change virtual machine power state: Internal error

ubuntu下VMware: Unable to change virtual machine power state: Internal error 按power键关机...
  • xuecz1230
  • xuecz1230
  • 2016年09月06日 16:29
  • 1529
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Application Design: Dynamically change state and city drop-down boxes with DHTML
举报原因:
原因补充:

(最多只允许输入30个字)