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 >
2014-03-25 04:09:38 +00:00
< h2 >
A script to automatically add dynamic, connected country and region dropdowns to your forms.
< / h2 >
2014-03-25 03:56:12 +00:00
< / 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-26 05:36:31 +00:00
< p >
2014-04-26 17:45:46 +00:00
Just view the page source code to see how the following examples work. There's no javascript you have to
enter: you just need to add specific attributes to your < select> tags.
2014-03-26 05:36:31 +00:00
< / p >
2014-03-25 03:56:12 +00:00
2014-03-26 05:36:31 +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 >
2014-04-26 17:45:46 +00:00
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.
2014-03-25 04:03:22 +00:00
< / 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 >
2014-03-25 04:06:05 +00:00
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-49335670-1', 'benkeen.github.io');
ga('send', 'pageview');
< / script >
2014-03-25 03:56:12 +00:00
< / body >
< / html >
