103 lines
3.5 KiB
HTML
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> |