Finished up script + doc
This commit is contained in:
Ben Keen
parent
69d18fce86
commit
c2e29c98ba
16
README.md
16
README.md
|
|
@ -54,6 +54,22 @@ If your form is used for people returning to it (e.g. "Edit Contact Info" or wha
|
|||
region fields to be prefilled with the appropriate value on page load. To do that, just add a `data-default=""` attribute
|
||||
to each element containing the country / region value last saved.
|
||||
|
||||
### List of data-* attributes
|
||||
|
||||
This lists all the available data-* attributes that you can add to the country/region fields to customize the appearance
|
||||
and behaviour.
|
||||
|
||||
##### country fields
|
||||
|
||||
- `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.
|
||||
|
||||
##### region fields
|
||||
- `data-blank-option` - before the user selects a country, there's a single <option> displayed which by default is the
|
||||
"-" character.
|
||||
- `data-default-option` - optional. Default: "Select region". This determines the default, blank option display value
|
||||
that shows up after a user has selected a country.
|
||||
|
||||
|
||||
### Notes for Developers
|
||||
|
||||
|
|
|
|||
31
example.html
31
example.html
|
|
@ -1,7 +1,7 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<title>country-region-dropdowns example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -12,21 +12,36 @@
|
|||
</p>
|
||||
|
||||
<select class="crs-country" data-region-id="one"></select>
|
||||
<select class="crs-region" id="one"></select>
|
||||
<select id="one"></select>
|
||||
|
||||
<hr size="1" />
|
||||
|
||||
|
||||
<h1>Example 2</h1>
|
||||
|
||||
<p>
|
||||
Custom default option texts for both the country and region dropdowns.
|
||||
<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 class="crs-region" id="two"></select>
|
||||
<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" />
|
||||
<hr size="1" />
|
||||
|
||||
<script src="source/country-region-selector.js"></script>
|
||||
|
||||
<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" />
|
||||
|
||||
<script src="source/country-region-selector.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
12
gruntfile.js
12
gruntfile.js
|
|
@ -6,7 +6,17 @@ module.exports = function(grunt) {
|
|||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
|
||||
var config = {
|
||||
|
||||
uglify: {
|
||||
standalone: {
|
||||
files: {
|
||||
'source/country-region-selector.min.js': 'source/country-region-selector.js'
|
||||
},
|
||||
options: {
|
||||
report: "min",
|
||||
compress: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
grunt.initConfig(config);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
"use strict";
|
||||
|
||||
var _countryClass = "crs-country";
|
||||
var _regionClass = "crs-region";
|
||||
var _defaultCountryStr = "Select country";
|
||||
var _defaultRegionStr = "Select region";
|
||||
|
||||
|
||||
var _data = [
|
||||
{ c: "Afghanistan", cs: "AF", cl: "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol" },
|
||||
|
|
@ -247,8 +249,7 @@
|
|||
|
||||
|
||||
var _init = function() {
|
||||
var countryDropdowns = document.getElementsByClassName("crs-country");
|
||||
|
||||
var countryDropdowns = document.getElementsByClassName(_countryClass);
|
||||
for (var i=0; i<countryDropdowns.length; i++) {
|
||||
_populateCountryFields(countryDropdowns[i]);
|
||||
}
|
||||
|
|
@ -259,21 +260,24 @@
|
|||
countryElement.length = 0;
|
||||
|
||||
var customOptionStr = countryElement.getAttribute("data-default-option");
|
||||
var defaultOptionStr = customOptionStr ? customOptionStr : "Select Country";
|
||||
var defaultOptionStr = customOptionStr ? customOptionStr : _defaultCountryStr;
|
||||
|
||||
var customValue = countryElement.getAttribute("data-value");
|
||||
|
||||
countryElement.options[0] = new Option(defaultOptionStr, '');
|
||||
countryElement.selectedIndex = 0;
|
||||
for (var i=0; i<_data.length; i++) {
|
||||
countryElement.options[countryElement.length] = new Option(_data[i].c, _data[i].c);
|
||||
var val = (customValue === "2-char") ? _data[i].cs : _data[i].c;
|
||||
countryElement.options[countryElement.length] = new Option(_data[i].c, val);
|
||||
}
|
||||
|
||||
var regionID = countryElement.getAttribute("data-region-id");
|
||||
if (regionID) {
|
||||
var regionField = document.getElementById(regionID);
|
||||
if (regionField) {
|
||||
_initRegionField(regionField);
|
||||
var regionElement = document.getElementById(regionID);
|
||||
if (regionElement) {
|
||||
_initRegionField(regionElement);
|
||||
countryElement.onchange = function() {
|
||||
_populateRegionFields(countryElement, regionField);
|
||||
_populateRegionFields(countryElement, regionElement);
|
||||
};
|
||||
} else {
|
||||
console.error("Region dropdown DOM node with ID " + regionID + " not found.");
|
||||
|
|
@ -282,27 +286,34 @@
|
|||
};
|
||||
|
||||
var _initRegionField = function(el) {
|
||||
var customOptionStr = el.getAttribute("data-default-option");
|
||||
var customOptionStr = el.getAttribute("data-blank-option");
|
||||
var defaultOptionStr = customOptionStr ? customOptionStr : "-";
|
||||
el.options[0] = new Option(defaultOptionStr, '');
|
||||
el.length = 0;
|
||||
el.options[0] = new Option(defaultOptionStr, "");
|
||||
el.selectedIndex = 0;
|
||||
};
|
||||
|
||||
var _populateRegionFields = function(countryElement, stateElementId) {
|
||||
// var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;
|
||||
// var stateElement = document.getElementById( stateElementId );
|
||||
//
|
||||
// stateElement.length=0; // Fixed by Julian Woods
|
||||
// stateElement.options[0] = new Option('Select State','');
|
||||
// stateElement.selectedIndex = 0;
|
||||
//
|
||||
// var state_arr = s_a[selectedCountryIndex].split("|");
|
||||
//
|
||||
// for (var i=0; i<state_arr.length; i++) {
|
||||
// stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
|
||||
// }
|
||||
var _populateRegionFields = function(countryElement, regionElement) {
|
||||
var selectedCountryIndex = countryElement.selectedIndex;
|
||||
|
||||
var customOptionStr = regionElement.getAttribute("data-default-option");
|
||||
var defaultOptionStr = customOptionStr ? customOptionStr : _defaultRegionStr;
|
||||
|
||||
if (countryElement.value === "") {
|
||||
_initRegionField(regionElement);
|
||||
} else {
|
||||
regionElement.length = 0;
|
||||
regionElement.options[0] = new Option(defaultOptionStr, '');
|
||||
regionElement.selectedIndex = 0;
|
||||
|
||||
var regions = _data[selectedCountryIndex].cl.split("|");
|
||||
for (var i=0; i<regions.length; i++) {
|
||||
regionElement.options[regionElement.length] = new Option(regions[i], regions[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*!
|
||||
* contentloaded.js
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user