will/country-region-selector
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished up script + doc

Browse Source
This commit is contained in:
Ben Keen 2014-03-24 20:08:39 -07:00
parent 69d18fce86
commit c2e29c98ba
4 changed files with 85 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -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 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. 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 ### Notes for Developers

23
example.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title></title> <title>country-region-dropdowns example</title>
</head> </head>
<body> <body>
@ -12,18 +12,33 @@
</p> </p>
<select class="crs-country" data-region-id="one"></select> <select class="crs-country" data-region-id="one"></select>
<select class="crs-region" id="one"></select> <select id="one"></select>
<hr size="1" /> <hr size="1" />
<h1>Example 2</h1> <h1>Example 2</h1>
<p> <p>
Custom default option texts for both the country and region dropdowns. Custom default option texts for both the country and region dropdowns.
</p> </p>
<select class="crs-country" data-region-id="two" data-default-option="Select a country, man!"></select> <select class="crs-country" data-region-id="two" data-default-option="Select a country, man."></select>
<select class="crs-region" id="two"></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" />
<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" /> <hr size="1" />

12
gruntfile.js
View File

@ -6,7 +6,17 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
var config = { var config = {
uglify: {
standalone: {
files: {
'source/country-region-selector.min.js': 'source/country-region-selector.js'
},
options: {
report: "min",
compress: true
}
}
}
}; };
grunt.initConfig(config); grunt.initConfig(config);

59
source/country-region-selector.js
View File

@ -2,7 +2,9 @@
"use strict"; "use strict";
var _countryClass = "crs-country"; var _countryClass = "crs-country";
var _regionClass = "crs-region"; var _defaultCountryStr = "Select country";
var _defaultRegionStr = "Select region";
var _data = [ 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" }, { 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 _init = function() {
var countryDropdowns = document.getElementsByClassName("crs-country"); var countryDropdowns = document.getElementsByClassName(_countryClass);
for (var i=0; i<countryDropdowns.length; i++) { for (var i=0; i<countryDropdowns.length; i++) {
_populateCountryFields(countryDropdowns[i]); _populateCountryFields(countryDropdowns[i]);
} }
@ -259,21 +260,24 @@
countryElement.length = 0; countryElement.length = 0;
var customOptionStr = countryElement.getAttribute("data-default-option"); 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.options[0] = new Option(defaultOptionStr, '');
countryElement.selectedIndex = 0; countryElement.selectedIndex = 0;
for (var i=0; i<_data.length; i++) { 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"); var regionID = countryElement.getAttribute("data-region-id");
if (regionID) { if (regionID) {
var regionField = document.getElementById(regionID); var regionElement = document.getElementById(regionID);
if (regionField) { if (regionElement) {
_initRegionField(regionField); _initRegionField(regionElement);
countryElement.onchange = function() { countryElement.onchange = function() {
_populateRegionFields(countryElement, regionField); _populateRegionFields(countryElement, regionElement);
}; };
} else { } else {
console.error("Region dropdown DOM node with ID " + regionID + " not found."); console.error("Region dropdown DOM node with ID " + regionID + " not found.");
@ -282,27 +286,34 @@
}; };
var _initRegionField = function(el) { var _initRegionField = function(el) {
var customOptionStr = el.getAttribute("data-default-option"); var customOptionStr = el.getAttribute("data-blank-option");
var defaultOptionStr = customOptionStr ? customOptionStr : "-"; var defaultOptionStr = customOptionStr ? customOptionStr : "-";
el.options[0] = new Option(defaultOptionStr, ''); el.length = 0;
el.options[0] = new Option(defaultOptionStr, "");
el.selectedIndex = 0; el.selectedIndex = 0;
}; };
var _populateRegionFields = function(countryElement, stateElementId) { var _populateRegionFields = function(countryElement, regionElement) {
// var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex; var selectedCountryIndex = countryElement.selectedIndex;
// var stateElement = document.getElementById( stateElementId );
// var customOptionStr = regionElement.getAttribute("data-default-option");
// stateElement.length=0; // Fixed by Julian Woods var defaultOptionStr = customOptionStr ? customOptionStr : _defaultRegionStr;
// stateElement.options[0] = new Option('Select State','');
// stateElement.selectedIndex = 0; if (countryElement.value === "") {
// _initRegionField(regionElement);
// var state_arr = s_a[selectedCountryIndex].split("|"); } else {
// regionElement.length = 0;
// for (var i=0; i<state_arr.length; i++) { regionElement.options[0] = new Option(defaultOptionStr, '');
// stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]); 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 * contentloaded.js
* *