country-region-selector/index.html
2014-03-24 21:03:22 -07:00

103 lines
3.5 KiB
HTML

<!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">
<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>
<h3>Examples</h3>
<h4>Example 1</h4>
<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>
<div>
Country: <select class="crs-country" data-region-id="one"></select>
</div>
<div>
Region: <select id="one"></select>
</div>
<hr size="1" />
<h4>Example 2</h4>
<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>
</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>
<script src="crs.min.js"></script>
</div>
</div>
</body>
</html>