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.

Examples

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!

Example 9

This example uses the data-preferred="CA,US..." and data-preferred-delim="-----" options for the country field. It allows you to move preferred countries to appear at the top of the country dropdown. Just enter a comma delimited list of the country short codes.