will/country-region-selector
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

doc update

Browse Source
This commit is contained in:
Ben Keen 2014-03-25 22:40:03 -07:00
parent 9e583900e6
commit 25a8af6be8
2 changed files with 7 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1,13 +1,13 @@
## Country-Region-Selector (CRS)
A common thing you often see in forms is a country dropdown which changes the contents of a second region field
when a country is selected. It's super easy to do this, but requires a lot of leg work tracking down the data and
rigging it all up in your form. This script let's you set that all up automatically without having to run any custom
javascript.
A common form feature is dynamic, connected country and region dropdowns, where the region field is updated to contain
whatever regions (provinces / states / territories / counties etc.) are appropriate for the selected country. It's super
easy to do this, but requires a lot of leg work tracking down the data and hooking it all up. This script lets you easily
add this feature to your form without having to write any code.
The script comes in two flavours:
- standalone script (no dependencies, just plain JS) - **54KB** (minified version)
- a jQuery-dependent version (ever-so slightly smaller) - **53KB** (minified version)
It comes in two flavours:
- [standalone script](./source/crs.min.js) (no dependencies, just plain JS) - **54KB** (minified version)
- a [jQuery-dependent version](./source/crs.min.js) (ever-so slightly smaller) - **53KB** (minified version)
The reason the files are so large is that they contain all the country and region strings.

59
example.html
View File

@ -1,59 +0,0 @@
<!doctype html>
<html>
<head>
<title>country-region-dropdowns example</title>
</head>
<body>
<h1>country-region-dropdowns example</h1>
<h2>Example 1</h2>
<p>
This is a simple no-frills example.
</p>
<select class="crs-country" data-region-id="one"></select>
<select id="one"></select>
<hr size="1" />
<h2>Example 2</h2>
<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" />
<h2>Example 3</h2>
<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" />
<h2>Example 4</h2>
<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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="source/jquery.crs.js"></script>
</body>
</html>