2014-03-25 03:56:12 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = 'utf-8' >
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
< link href = 'https://fonts.googleapis.com/css?family=Chivo:900' rel = 'stylesheet' type = 'text/css' >
< link rel = "stylesheet" type = "text/css" href = "stylesheets/stylesheet.css" media = "screen" / >
< link rel = "stylesheet" type = "text/css" href = "stylesheets/pygment_trac.css" media = "screen" / >
< link rel = "stylesheet" type = "text/css" href = "stylesheets/print.css" media = "print" / >
<!-- [if lt IE 9]>
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< title > Country-region-selector by benkeen< / title >
< / head >
< body >
< div id = "container" >
< div class = "inner" >
< header >
< h1 > Country-region-selector< / h1 >
< h2 > A simple, lightweight script that adds a country dropdown that automatically updates a corresponding region dropdown in your forms.< / h2 >
< / header >
< section id = "downloads" class = "clearfix" >
< a href = "https://github.com/benkeen/country-region-selector/zipball/master" id = "download-zip" class = "button" > < span > Download .zip< / span > < / a >
< a href = "https://github.com/benkeen/country-region-selector/tarball/master" id = "download-tar-gz" class = "button" > < span > Download .tar.gz< / span > < / a >
< a href = "https://github.com/benkeen/country-region-selector" id = "view-on-github" class = "button" > < span > View on GitHub< / span > < / a >
< / section >
< hr >
< section id = "main_content" >
2014-03-25 04:03:22 +00:00
< p > For installation and configuration details about the script, see the < a href = "https://github.com/benkeen/country-region-selector" > main github readme.< / a > < / p >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< h3 > Examples< / h3 >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< h4 > Example 1< / h4 >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< p >
This is a simple no-frills example. You can lay the fields out in your markup however you want - but
for simplicity, the rest of the examples will just put them side to side.
< / p >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< div >
Country: < select class = "crs-country" data-region-id = "one" > < / select >
< / div >
< div >
Region: < select id = "one" > < / select >
< / div >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< hr size = "1" / >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< h4 > Example 2< / h4 >
2014-03-25 03:56:12 +00:00
2014-03-25 04:03:22 +00:00
< p >
Custom default option texts for both the country and region dropdowns.
< / p >
< select class = "crs-country" data-region-id = "two" data-default-option = "Select a country, man." > < / select >
< select id = "two" data-blank-option = "No country selected, mon. (blank value)" data-default-option = "Select a region, pal. (default option)" > < / select >
< hr size = "1" / >
< h4 > Example 3< / h4 >
< p >
The country dropdown values are by default the same as the display values: the full country names.
By adding the < b > data-value="2-char"< / b > attribute to the country field, the values will be a 2-char
character code.
< / p >
< select class = "crs-country" data-region-id = "three" data-value = "2-char" > < / select >
< select id = "three" > < / select >
< hr size = "1" / >
< h4 > Example 4< / h4 >
< p >
Pre-filling the fields on page load.
< / p >
< select class = "crs-country" data-region-id = "four" data-default-value = "Canada" > < / select >
< select id = "four" data-default-value = "British Columbia" > < / select >
2014-03-25 03:56:12 +00:00
< / section >
< footer >
Country-region-selector is maintained by < a href = "https://github.com/benkeen" > benkeen< / a > < br >
This page was generated by < a href = "http://pages.github.com" > GitHub Pages< / a > . Tactile theme by < a href = "https://twitter.com/jasonlong" > Jason Long< / a > .
< / footer >
2014-03-25 04:03:22 +00:00
< script src = "crs.min.js" > < / script >
2014-03-25 03:56:12 +00:00
< / div >
< / div >
< / body >
< / html >
