More blurb updates
This commit is contained in:
parent
25a8af6be8
commit
3ed42970d8
25
README.md
25
README.md
|
@ -36,28 +36,24 @@ It's very easy.
|
||||||
1. Include the `crs.min.js` file in your webpage.
|
1. Include the `crs.min.js` file in your webpage.
|
||||||
2. Add two `<select>` fields in the appropriate locations in your form.
|
2. Add two `<select>` fields in the appropriate locations in your form.
|
||||||
3. Give the country field a class of `crs-country`.
|
3. Give the country field a class of `crs-country`.
|
||||||
4. Give the region field a class of `crs-country`.
|
4. Now we need to map each country field to its corresponding region field so the script knows what to update when
|
||||||
3. Now we need to map each country to the region field so the script knows what to update. Add an
|
a country is selected. Add an attribute to the country dropdown: `data-region-id="ABC"` where ABC is any string. Now
|
||||||
attribute to the country dropdown: `data="crsX"` where X is any number (e.g. start with 1). Give the region dropdown a
|
Give the region dropdown a **id** of "ABC".
|
||||||
**class** of "crxX" where X is the same number you just picked.
|
5. That's it! You're done.
|
||||||
|
|
||||||
|
But here's a few more tips for further configuration.
|
||||||
|
|
||||||
#### Default "Please select" Values
|
#### Default "Please select" Values
|
||||||
|
|
||||||
If you want to add default "Please select" options to either the country or region fields, just go ahead and add it
|
If you want to add default "Please select" options to either the country or region fields, just go ahead and add it
|
||||||
directly in the markup. The script will **append** the country and region `<option>` fields - not overwrite them.
|
directly in the markup. The script will **append** the country and region `<option>` fields - not overwrite them.
|
||||||
|
|
||||||
#### Styling
|
|
||||||
|
|
||||||
If you didn't add a default value for the region field, you may notice that it looks pretty pretty crumby. So to style
|
|
||||||
it, just add the following CSS: `.yourField { width: 100px; }`
|
|
||||||
|
|
||||||
#### Adding default values for each field
|
#### Adding default values for each field
|
||||||
|
|
||||||
If your form is used for people returning to it (e.g. "Edit Contact Info" or whatever), you'll need the country and
|
If your form is used for people returning to it (e.g. "Edit Contact Info" or whatever), you'll need the country and
|
||||||
region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default-value=""` attribute
|
region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default-value=""`
|
||||||
to each element containing the country / region value last saved. Note: the region value will only ever be populated if the
|
attribute to each element containing the country / region value last saved. Note: the region value will only ever be
|
||||||
country field is as well.
|
populated if the country field is as well.
|
||||||
|
|
||||||
|
|
||||||
### List of data-* attributes
|
### List of data-* attributes
|
||||||
|
|
||||||
|
@ -69,6 +65,9 @@ and behaviour.
|
||||||
- `data-region-id` - required. This should contain the ID of the region field that it's being mapped to.
|
- `data-region-id` - required. This should contain the ID of the region field that it's being mapped to.
|
||||||
- `data-default-option` - optional. Default: "Select country". This determines the default, blank option display value.
|
- `data-default-option` - optional. Default: "Select country". This determines the default, blank option display value.
|
||||||
- `data-default-value` - optional. The default selected value in the country dropdown (e.g. "Canada")
|
- `data-default-value` - optional. The default selected value in the country dropdown (e.g. "Canada")
|
||||||
|
- `data-value="2-char"` - optional. The default behaviour is for the value attributes of the country dropdown options
|
||||||
|
to be the full country name. If you'd rather use a 2-char code, add this attribute. Note: the 2-char codes are **mostly**
|
||||||
|
ISO standard 2-char country codes, but not all. They are, however, unique across the dataset.
|
||||||
|
|
||||||
##### region fields
|
##### region fields
|
||||||
- `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the
|
- `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the
|
||||||
|
|
Loading…
Reference in New Issue
Block a user