diff --git a/README.md b/README.md
index c670591..5fe2a8c 100644
--- a/README.md
+++ b/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
 
diff --git a/example.html b/example.html
index 7b10ea4..87e9ba3 100644
--- a/example.html
+++ b/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>
\ No newline at end of file
diff --git a/gruntfile.js b/gruntfile.js
index ec986a2..379c6d2 100644
--- a/gruntfile.js
+++ b/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);
diff --git a/source/country-region-selector.js b/source/country-region-selector.js
index 212ef6c..36506a0 100644
--- a/source/country-region-selector.js
+++ b/source/country-region-selector.js
@@ -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
 	 *
