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!