Support multiselect fields for the region selection

source/source-crs.js

@@ -104,12 +104,15 @@
       if (defaultSelectedValue !== null && countryElement.selectedIndex > 0) {
         _populateRegionFields(countryElement, regionElement);
 
-        var defaultRegionSelectedValue = regionElement.getAttribute("data-default-value");
+        var defaultRegionSelectedValue = _extractSelectedRegions(regionElement);
+
         var useShortcode = (regionElement.getAttribute("data-value") === "shortcode");
         if (defaultRegionSelectedValue !== null) {
           var index = (_showEmptyCountryOption) ? countryElement.selectedIndex - 1 : countryElement.selectedIndex;
           var data = countries[index][3];
-          _setDefaultRegionValue(regionElement, data, defaultRegionSelectedValue, useShortcode);
+          for (var l=0, ll=defaultRegionSelectedValue.length; l < ll; l+=1) {
+            _setDefaultRegionValue(regionElement, data, defaultRegionSelectedValue[l], useShortcode);
+          }
         }
       } else if (_showEmptyCountryOption === false) {
         _populateRegionFields(countryElement, regionElement);
@@ -124,7 +127,7 @@
 	var _initRegionField = function(el) {
 		var customOptionStr = el.getAttribute("data-blank-option");
 		var defaultOptionStr = customOptionStr ? customOptionStr : "-";
-    var showEmptyOption = el.getAttribute("data-show-default-option");
+    var showEmptyOption = !el.multiple && el.getAttribute("data-show-default-option");
     _showEmptyRegionOption = (showEmptyOption === null) ? true : (showEmptyOption === "true");
 
 		el.length = 0;
@@ -184,11 +187,22 @@
     }
   };
 
+  var _extractSelectedRegions = function(regionElement) {
+    if (regionElement.getAttribute("data-default-values")) {
+      return regionElement.getAttribute("data-default-values").split(',');
+    } else if (regionElement.getAttribute("data-default-value")) {
+      // wrap single values in array, so we can always treat them the same
+      return [regionElement.getAttribute("data-default-value")];
+    }
+  }
+
 	var _setDefaultRegionValue = function(field, data, val, useShortcode) {
+    var idx;
 		for (var i=0; i<data.regions.length; i++) {
       var currVal = (useShortcode && data.hasShortcodes && data.regions[i][1]) ? data.regions[i][1] : data.regions[i][0];
 			if (currVal === val) {
-				field.selectedIndex = (_showEmptyRegionOption) ? i + 1 : i;
+				idx = (_showEmptyRegionOption) ? i + 1 : i;
+        field.options[idx].selected = 'true';
 				break;
 			}
 		}

source/source-jquery.crs.js

@@ -97,13 +97,15 @@
       if (defaultSelectedValue && countryElement.selectedIndex > 0) {
         _populateRegionFields(countryElement, regionElement);
 
-        var defaultRegionSelectedValue = $(regionElement).attr("data-default-value");
+        var defaultRegionSelectedValue = _extractSelectedRegions(regionElement);
 
         var useShortcode = (regionElement.getAttribute("data-value") === "shortcode");
         if (defaultRegionSelectedValue !== null) {
           var index = (_showEmptyCountryOption) ? countryElement.selectedIndex - 1 : countryElement.selectedIndex;
           var data = _countries[index][3];
-          _setDefaultRegionValue(regionElement, data, defaultRegionSelectedValue, useShortcode);
+          for (var l=0, ll=defaultRegionSelectedValue.length; l < ll; l+=1) {
+            _setDefaultRegionValue(regionElement, data, defaultRegionSelectedValue[l], useShortcode);
+          }
         }
       } else if (_showEmptyCountryOption === false) {
         _populateRegionFields(countryElement, regionElement);
@@ -171,15 +173,28 @@
     }
   };
 
-  var _setDefaultRegionValue = function(field, data, val, useShortcode) {
-    for (var i=0; i<data.regions.length; i++) {
-      var currVal = (useShortcode && data.hasShortcodes && data.regions[i][1]) ? data.regions[i][1] : data.regions[i][0];
-      if (currVal === val) {
-        field.selectedIndex = (_showEmptyRegionOption) ? i + 1 : i;
-        break;
-      }
+  var _extractSelectedRegions = function(regionElement) {
+    var values;
+    if (values = $(regionElement).attr("data-default-values")) {
+      return values.split(',');
+    } else if (values = $(regionElement).attr("data-default-value")) {
+      // wrap single values in array, so we can always treat them the same
+      return [values];
     }
-  };
+  }
+
+	var _setDefaultRegionValue = function(field, data, val, useShortcode) {
+    var idx;
+		for (var i=0; i<data.regions.length; i++) {
+      var currVal = (useShortcode && data.hasShortcodes && data.regions[i][1]) ? data.regions[i][1] : data.regions[i][0];
+			if (currVal === val) {
+				idx = (_showEmptyRegionOption) ? i + 1 : i;
+        field.options[idx].selected = 'true';
+				break;
+			}
+		}
+	};
+
 
 	var _populateRegionFields = function(countryElement, regionElement) {
     var selectedCountryIndex = (_showEmptyCountryOption) ? countryElement.selectedIndex-1 : countryElement.selectedIndex;

test.html

@@ -140,6 +140,17 @@ <h4>Example 8</h4>
         <select class="crs-country" data-region-id="eight"></select>
         <select id="eight" data-value="shortcode"></select>
 
+        <h4>Example 9</h4>
+
+        <p>
+            This demos the multiple-select option for the region field. Setting <code>data-default-values</code> to a
+            comma-separated list will select multiple values.
+        </p>
+
+        <select class="crs-country" data-region-id="nine" data-default-value='United States'></select>
+        <select id="nine" data-value="shortcode" data-default-values='AL,AZ,CA' multiple></select>
+
+
     </section>
     <script src="dist/crs.min.js"></script>