A script to automatically add dynamic, connected country and region dropdowns to your forms.

Download .zip Download .tar.gz View on GitHub

For installation and configuration details about the script, see the main github readme.

Just view the page source code to see how the following examples work. In examples 1-4 there is no javascript you have to enter: you just need to add specific attributes to your <select> tags. In the 5th example, there's some JS to illustrate how to manually initialize the country-region selector.


Example 1

Let's start with a simple, no-frills example. You can lay the fields out in your markup - as this one demonstrates - however you want - but for simplicity, the rest of the examples will just put them side to side.


Example 2

Custom default option texts for both the country and region dropdowns.

Example 3

The country dropdown values are by default the same as the display values: the full country names. By adding the data-value="shortcode" attribute to the country field, the values will be a 2-char character code. See Example 8 for a similar example with the region dropdown.

Example 4

Pre-filling the fields on page load.

Example 5

Manual initialization for dynamically inserted DOM content.

Example 6

Whitelisting a subset of countries to limit what appears. This just shows the UK, United States and Canada.

Example 7

This example does the reverse of the previous: it blacklists a list of countries, so all EXCEPT those countries show up. In this case it blacklists all countries beginning with letter A.

Example 8

This demos the data-value="shortcode" option for the region field. Like with data-value setting on the country field, this option changes the value attribute of region dropdowns so a shorter version of the region is passed to the server (e.g. BC instead of British Columbia). Please note: not all region shortcodes have been entered yet, so if there isn't anything available it will fallback to the full region name. If you're storing this info in a DB, make sure to allocate enough room!