From 871065da120e7197982a9c450c70afaa033f3ca9 Mon Sep 17 00:00:00 2001 From: Michael Wheeler Date: Mon, 16 Apr 2018 13:20:30 -0500 Subject: [PATCH] Support multiselect fields for the region selection --- dist/crs.js | 22 ++++++++++++++++++---- dist/crs.min.js | 2 +- dist/jquery.crs.js | 35 +++++++++++++++++++++++++---------- dist/jquery.crs.min.js | 2 +- source/source-crs.js | 22 ++++++++++++++++++---- source/source-jquery.crs.js | 35 +++++++++++++++++++++++++---------- test.html | 11 +++++++++++ 7 files changed, 99 insertions(+), 30 deletions(-) diff --git a/dist/crs.js b/dist/crs.js index d0cc69a..5da6359 100644 --- a/dist/crs.js +++ b/dist/crs.js @@ -105,12 +105,15 @@ var _data = [["Afghanistan","AF","Badakhshan~BDS|Badghis~BDG|Baghlan~BGL|Balkh~B 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); @@ -125,7 +128,7 @@ var _data = [["Afghanistan","AF","Badakhshan~BDS|Badghis~BDG|Baghlan~BGL|Balkh~B 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; @@ -185,11 +188,22 @@ var _data = [["Afghanistan","AF","Badakhshan~BDS|Badghis~BDG|Baghlan~BGL|Balkh~B } }; + 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; i0){o(a,t);var u=t.getAttribute("data-default-value"),v="shortcode"===t.getAttribute("data-value");if(null!==u){var w=d?a.selectedIndex-1:a.selectedIndex,x=l[w][3];n(t,x,u,v)}}else d===!1&&o(a,t);else console.error("Region dropdown DOM node with ID "+s+" not found.");a.setAttribute("data-crs-loaded","true")}},k=function(a){var b=a.getAttribute("data-blank-option"),c=b?b:"-",d=a.getAttribute("data-show-default-option");e=null===d?!0:"true"===d,a.length=0,e&&(a.options[0]=new Option(c,""),a.selectedIndex=0)},l=function(a){var b=a.whitelist+"|"+a.blacklist,c=0;if(!g.hasOwnProperty(b))if(g[b]=[],a.whitelist){var d=a.whitelist.split(",");for(c=0;c0){p(a,u);var v=n(u),w="shortcode"===u.getAttribute("data-value");if(null!==v)for(var x=d?a.selectedIndex-1:a.selectedIndex,y=l[x][3],z=0,A=v.length;A>z;z+=1)o(u,y,v[z],w)}else d===!1&&p(a,u);else console.error("Region dropdown DOM node with ID "+t+" not found.");a.setAttribute("data-crs-loaded","true")}},k=function(a){var b=a.getAttribute("data-blank-option"),c=b?b:"-",d=!a.multiple&&a.getAttribute("data-show-default-option");e=null===d?!0:"true"===d,a.length=0,e&&(a.options[0]=new Option(c,""),a.selectedIndex=0)},l=function(a){var b=a.whitelist+"|"+a.blacklist,c=0;if(!g.hasOwnProperty(b))if(g[b]=[],a.whitelist){var d=a.whitelist.split(",");for(c=0;c 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); @@ -172,15 +174,28 @@ var _data = [["Afghanistan","AF","Badakhshan~BDS|Badghis~BDG|Baghlan~BGL|Balkh~B } }; - var _setDefaultRegionValue = function(field, data, val, useShortcode) { - for (var i=0; i0){n(a,s);var t=$(s).attr("data-default-value"),u="shortcode"===s.getAttribute("data-value");if(null!==t){var v=d?a.selectedIndex-1:a.selectedIndex,w=f[v][3];m(s,w,t,u)}}else d===!1&&n(a,s);else console.error("Region dropdown DOM node with ID "+r+" not found.");a.setAttribute("data-crs-loaded","true")}},j=function(a){var b=$(a).attr("data-blank-option"),c=b?b:"-",d=a.getAttribute("data-show-default-option");e=null===d?!0:"true"===d,a.length=0,e&&(a.options[0]=new Option(c,""),a.selectedIndex=0)},k=function(a){var b=g,c=[],d=0;if(a.whitelist){var e=a.whitelist.split(",");for(d=0;d0){o(a,t);var u=m(t),v="shortcode"===t.getAttribute("data-value");if(null!==u)for(var w=d?a.selectedIndex-1:a.selectedIndex,x=f[w][3],y=0,z=u.length;z>y;y+=1)n(t,x,u[y],v)}else d===!1&&o(a,t);else console.error("Region dropdown DOM node with ID "+s+" not found.");a.setAttribute("data-crs-loaded","true")}},j=function(a){var b=$(a).attr("data-blank-option"),c=b?b:"-",d=a.getAttribute("data-show-default-option");e=null===d?!0:"true"===d,a.length=0,e&&(a.options[0]=new Option(c,""),a.selectedIndex=0)},k=function(a){var b=g,c=[],d=0;if(a.whitelist){var e=a.whitelist.split(",");for(d=0;d 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 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; iExample 8 +

Example 9

+ +

+ This demos the multiple-select option for the region field. Setting data-default-values to a + comma-separated list will select multiple values. +

+ + + + +