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

a little more work...

Browse Source
This commit is contained in:
Benjamin Keen 2014-03-23 21:32:44 -07:00
parent ffd1332a8f
commit 69d18fce86
2 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
example.html
View File

@ -3,13 +3,30 @@
<head> <head>
<title></title> <title></title>
</head> </head>
<body>
<h1>Example 1</h1> <h1>Example 1</h1>
<select class="crs-country" data-crs-id=""></select> <p>
<select class="crs-region"></select> This is a simple no-frills example.
</p>
<hr size="1" /> <select class="crs-country" data-region-id="one"></select>
<select class="crs-region" id="one"></select>
<script src="source/country-region-selector.js"></script> <hr size="1" />
<h1>Example 2</h1>
<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>
<hr size="1" />
<script src="source/country-region-selector.js"></script>
</body>
</html> </html>

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

@ -1,6 +1,9 @@
(function() { (function() {
"use strict"; "use strict";
var _countryClass = "crs-country";
var _regionClass = "crs-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" },
{ c: "Albania", cs: "AL", cl: "Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore" }, { c: "Albania", cs: "AL", cl: "Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore" },
@ -249,29 +252,43 @@
for (var i=0; i<countryDropdowns.length; i++) { for (var i=0; i<countryDropdowns.length; i++) {
_populateCountryFields(countryDropdowns[i]); _populateCountryFields(countryDropdowns[i]);
} }
}; };
var _populateCountryFields = function(countryElement) { var _populateCountryFields = function(countryElement) {
countryElement.length = 0; countryElement.length = 0;
// countryElement.options[0] = new Option('Select Country', '');
// countryElement.selectedIndex = 0; var customOptionStr = countryElement.getAttribute("data-default-option");
var defaultOptionStr = customOptionStr ? customOptionStr : "Select Country";
countryElement.options[0] = new Option(defaultOptionStr, '');
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); countryElement.options[countryElement.length] = new Option(_data[i].c, _data[i].c);
} }
// Assigned all countries. Now assign event listener for the states. var regionID = countryElement.getAttribute("data-region-id");
if (regionID) {
// if (stateElementId) { var regionField = document.getElementById(regionID);
// countryElement.onchange = function(){ if (regionField) {
// populateStates( countryElementId, stateElementId ); _initRegionField(regionField);
// }; countryElement.onchange = function() {
// } _populateRegionFields(countryElement, regionField);
};
} else {
console.error("Region dropdown DOM node with ID " + regionID + " not found.");
} }
}
};
var _initRegionField = function(el) {
var customOptionStr = el.getAttribute("data-default-option");
var defaultOptionStr = customOptionStr ? customOptionStr : "-";
el.options[0] = new Option(defaultOptionStr, '');
el.selectedIndex = 0;
};
var _populateRegionFields = function(stateElementId) { var _populateRegionFields = function(countryElement, stateElementId) {
// var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex; // var selectedCountryIndex = document.getElementById( countryElementId ).selectedIndex;
// var stateElement = document.getElementById( stateElementId ); // var stateElement = document.getElementById( stateElementId );
// //
@ -284,8 +301,7 @@
// for (var i=0; i<state_arr.length; i++) { // for (var i=0; i<state_arr.length; i++) {
// stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]); // stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
// } // }
} };
/*! /*!
* contentloaded.js * contentloaded.js