country-region-selector/example.html

47 lines
1.1 KiB
HTML
Raw Normal View History

2014-03-23 04:10:12 +00:00
<!doctype html>
<html>
<head>
2014-03-25 03:08:39 +00:00
<title>country-region-dropdowns example</title>
2014-03-23 04:10:12 +00:00
</head>
2014-03-24 04:32:44 +00:00
<body>
2014-03-23 04:10:12 +00:00
2014-03-24 04:32:44 +00:00
<h1>Example 1</h1>
2014-03-23 04:10:12 +00:00
2014-03-24 04:32:44 +00:00
<p>
This is a simple no-frills example.
</p>
2014-03-23 04:10:12 +00:00
2014-03-24 04:32:44 +00:00
<select class="crs-country" data-region-id="one"></select>
2014-03-25 03:08:39 +00:00
<select id="one"></select>
2014-03-23 04:10:12 +00:00
2014-03-24 04:32:44 +00:00
<hr size="1" />
2014-03-25 03:08:39 +00:00
2014-03-24 04:32:44 +00:00
<h1>Example 2</h1>
2014-03-25 03:08:39 +00:00
<p>
Custom default option texts for both the country and region dropdowns.
2014-03-24 04:32:44 +00:00
</p>
2014-03-25 03:08:39 +00:00
<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>
2014-03-24 04:32:44 +00:00
2014-03-25 03:08:39 +00:00
<hr size="1" />
<h1>Example 3</h1>
<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" data-default-option=""></select>
<hr size="1" />
2014-03-24 04:32:44 +00:00
2014-03-25 03:08:39 +00:00
<script src="source/country-region-selector.js"></script>
2014-03-24 04:32:44 +00:00
</body>
2014-03-23 04:10:12 +00:00
</html>