doc update
This commit is contained in:
parent
9e583900e6
commit
25a8af6be8
14
README.md
14
README.md
|
@ -1,13 +1,13 @@
|
||||||
## Country-Region-Selector (CRS)
|
## 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
|
A common form feature is dynamic, connected country and region dropdowns, where the region field is updated to contain
|
||||||
when a country is selected. It's super easy to do this, but requires a lot of leg work tracking down the data and
|
whatever regions (provinces / states / territories / counties etc.) are appropriate for the selected country. It's super
|
||||||
rigging it all up in your form. This script let's you set that all up automatically without having to run any custom
|
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
|
||||||
javascript.
|
add this feature to your form without having to write any code.
|
||||||
|
|
||||||
The script comes in two flavours:
|
It comes in two flavours:
|
||||||
- standalone script (no dependencies, just plain JS) - **54KB** (minified version)
|
- [standalone script](./source/crs.min.js) (no dependencies, just plain JS) - **54KB** (minified version)
|
||||||
- a jQuery-dependent version (ever-so slightly smaller) - **53KB** (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.
|
The reason the files are so large is that they contain all the country and region strings.
|
||||||
|
|
||||||
|
|
59
example.html
59
example.html
|
@ -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>
|
|
Loading…
Reference in New Issue
Block a user