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.
.
Now if only we could get the coldfusion and javascript to talk ...
The code, version 1: Joint ColdFusion / JavaScript dynamic Web pageThe 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 foldfusion) to facilitate the switching.
The Queriesthe First Section of Code Is Comprised of Two Queries
Listing a). The first query ooes to get every (s) in the database to get evening distinct city-state combination. The second query is merely a subset of data from the first query to find all the distinct stats.
THE FORM WITH DOWNSNEXT, WE Take a Look at The Form
Listing b). This Form Is A Simple Form Comprised of Just The Two Drop-Down Boxes in Questions: One for State and The Other for City.
Note That you utilize the
Allstates Query Decland in Listing a to create the
Listing C, The JavaScript is enhanced by a bit of colorfusion code.
Let's Tackle this JavaScript and further explain it.
Var numberofstates = document.city_state.state_id.Options.Length The first line, you first, you,.
Var CityStateArray = new array (NumberofStates) CityStateArray [0] = new array () cityStateArray [0] [0] = new option ("SELECT a city ...", ") Here you create a new arch arrAns As you have stats. 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 Reference 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 First Element in
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], Ando On Until Arms [0] [4] ........................................................................................................................................ in
Listing D is where you integrate Coldfusion Code with the javascript. The JavaScript.
CityStateArray Element. Then you select every city That Matches That State from the
YOUTY IN YOURY. YOUTION 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 com 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 pageIf you don 't run ColdFusion, do not have a database with city / state info, or do not 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 returbir. 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 Wort'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.
