Every now and then, I end up working on a project that requires a form that includes county, city, and state information. More often than not, the client doesn’t about the rich data associated with any of the above – that is, they’re not particularly interested in latitude, longitude, population, or even zip code.
Simply put, they want the user to be able to select their country, select their city, and then select their state from a predefined list of options.
For the past couple of projects, I’ve been using three, very simple CSV’s for this and thought I’d share them here should anyone else want to use them. Additionally, I thought I’d share a simple implementation of how they can be used in WordPress projects.
Country State and City CSV
Here are the “County State City CSV” files. The archive includes:
- countries.csv which lists country names and the country abbreviations.
- states.csv includes all US states and their abbreviations
- cities.csv has a list of all current US cities.
Note that with the exception of the country csv file, the cities and the states and United States only. This is because the majority of the work I do is for projects, ahem, here in the United States.
Implementation in WordPress
Since this data is kept in external files, and since manually managing select elements (or autocomplete elements, etc.) could get cumbersome with exceptionally long lists – like the city list – I usually load this data via Ajax.
If you’re a WordPress developer, here’s an example of how you can populate a select box with, say, the countries.csv
file.
Mark It Up
First, go ahead and stub out the select
element that will be used for the countries:
<select name="countries"><option value="default">Select a country...
</option></select>
Request It
Next, write a small JavaScript function that does the following:
- Make an Ajax request to the URL where the
countries.csv
file is kept - Iterates through the list of codes and parses it
- Creates
option
elements - Appends them to the select element created above
The comments should clarify what’s going on the in code below:
// Defined variables used (JSLint likes them defined together and defined early)
var sCountriesURL, aCurCountries, aCurCountry, sCountry, sCountryCode, $countryOption;
// Note that sCountriesURL is left up for you how to define. It's simply the direct path
// to the countries.csv file
// Initiate the request for the countries to the URL of the file
$.get(sCountriesURL, function(response) {
// Read all of the countries into an array
aCurCountry = response.split('n');
// Iterate through the list of countries that are read...
$(aCurCountry).each(function(sKey, sVal) {
// Store the current country in its own array for readability
aCurCountry = sVal.split(',');
// Get the country and its country code from the current array
sCountry = aCurCountry[0];
sCountryCode = aCurCountry[1];
// Create the option element having the country code as the value, text as the name
$countryOption = $('<option />')
.attr('value', sCountryCode)
.text(sCountry);
// And add it to the select element
$('#countries').append($countryOption);
});
});
Once done, the select
element will be populated with this of countries from the CSV.
Performance, JSON, and All That Jazz
Because I know there are n-number of ways to improve what’s above, I thought I’d tackle a couple of those points here.
Page Load Time
Performing this process on a page load every time the page is loading can be taxing, so you could work up an alternative implementation such as caching the values in some way (like storing the countries as a transient), a set of options, or even defining a lookup table (if the list is that large).
Why Not JSON?
I love JSON. In fact, when it comes to sending data to and from the client and the server, it’s my format of choice. The thing is, it’s far more common to find country, city, and state data in CSV formats – ranging from simple to very, very detailed – than it is to find it in JSON format.
Sure, you could convert the list to JSON and be just as well.
All That Jazz
Regardless of how you implement this, these three files have been useful for me in recent projects, so I thought I’d make them available here alone with a single example of how it could be used.
Sure, there are more – some more optimized than others – but either way, grab the files and implement them however you see fit.
Leave a Reply
You must be logged in to post a comment.