forked from country-regions/country-region-selector
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
151 lines (104 loc) · 5.2 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Country-region-selector</title>
</head>
<body>
<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>
<p>
Just view the page source code to see how the following examples work. In examples 1-4 there is no javascript
you have to enter: you just need to add specific attributes to your <select> tags. In the 5th example,
there's some JS to illustrate how to manually initialize the country-region selector.
</p>
<h3>Examples</h3>
<h4>Example 1</h4>
<p>
Let's start with a simple, no-frills example. You can lay the fields out in your markup - as this one
demonstrates - 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="shortcode"</b> attribute to the country field, the values will be a
2-char character code. See Example 8 for a similar example with the region dropdown.
</p>
<select class="crs-country" data-region-id="three" ></select>
<select id="three" data-value="shortcode"></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>
<hr size="1" />
<h4>Example 5</h4>
<p>
Manual initialization for dynamically inserted DOM content.
</p>
<script>
function createAndInit() {
var html = '<select class="crs-country" data-region-id="five"></select>' +
'<select id="five"></select>';
document.getElementById('example5_target').innerHTML = html;
// manually initialize
window.crs.init();
}
</script>
<input type="button" value="Insert country + region selects and initialize" onclick="createAndInit()" />
<div id="example5_target"></div>
<hr size="1" />
<h4>Example 6</h4>
<p>
Whitelisting a subset of countries to limit what appears. This just shows the UK, United States and Canada.
</p>
<select class="crs-country" data-whitelist="GB,US,CA" data-region-id="six"></select>
<select id="six"></select>
<hr size="1" />
<h4>Example 7</h4>
<p>
This example does the reverse of the previous: it blacklists a list of countries, so all EXCEPT those
countries show up. In this case it blacklists all countries beginning with letter A.
</p>
<select class="crs-country" data-blacklist="AF,AX,AL,DZ,AS,AD,AO,AI,AQ,AG,AR,AM,AW,AU,AT,AZ" data-region-id="seven"></select>
<select id="seven"></select>
<hr size="1" />
<h4>Example 8</h4>
<p>
This demos the <code>data-value="shortcode"</code> option for the region field. Like with data-value setting
on the country field, this option changes the value attribute of region dropdowns so a shorter version
of the region is passed to the server (e.g. BC instead of British Columbia). <b>Please note: not all
region shortcodes have been entered yet, so if there isn't anything available it will fallback to the
full region name. If you're storing this info in a DB, make sure to allocate enough room!</b>
</p>
<select class="crs-country" data-region-id="eight"></select>
<select id="eight" data-value="shortcode"></select>
<hr size="1" />
<h4>Example 9</h4>
<p>
This example uses the <code>data-preferred="CA,US..."</code> and <code>data-preferred-delim="-----"</code>
options for the country field. It allows you to move preferred countries to appear at the top of
the country dropdown. Just enter a comma delimited list of the country short codes.
</p>
<select class="crs-country" data-region-id="nine" data-preferred="CA,US,MX" data-preferred-delim="-----"></select>
<select id="nine"></select>
</section>
<script src="dist/crs.min.js"></script>
</body>
</html>