This week as part of some contract work I found I needed to add a simple country & region dropdown to a form, where the fields would be tied to one another; i.e. when you select a country, a corresponding region field would be updated, containing the regions appropriate for that country selection.

Such a simple thing – done a million times. But it turns out I couldn’t find a pre-existing one that fitted the bill exactly as I needed. Lame! So I wrote my own and stuck it up on github.

Documentation: https://github.com/benkeen/country-region-selector
Demo: http://benkeen.github.io/country-region-selector

In the spirit of “You don’t need jQuery” I wrote the thing in plain JS, then ported it over to jQuery just to see how much filesize I’d save. Virtually sod all, as it turns out (1KB).

Oh, and it turns out the file size had to be fairly large (~50KB) due to the sheer amount of string data being stored in it. But I think that’s probably preferable to doing a complex Ajax call to retrieve the individual region field data – much less fussy!