Skip to content

Commit

Permalink
Support multiselect fields for the region selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@wheeyls
wheeyls committed Aug 23, 2018
1 parent 7dfa3da commit 7c7b9be
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 34 deletions.
26 changes: 20 additions & 6 deletions dist/crs.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/crs.min.js
View file

Large diffs are not rendered by default.

36 changes: 26 additions & 10 deletions dist/jquery.crs.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.crs.min.js
View file

Large diffs are not rendered by default.

24 changes: 19 additions & 5 deletions source/source-crs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,14 @@
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);
Expand All @@ -129,7 +131,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;
Expand Down Expand Up @@ -189,11 +191,23 @@
}
};

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;
var showEmpty = !field.multiple && _showEmptyRegionOption;
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 = (showEmpty) ? i + 1 : i;
field.options[idx].selected = 'selected';
break;
}
}
Expand All @@ -220,7 +234,7 @@
var val = (displayType === 'shortcode' && regionData.hasShortcodes) ? regionData.regions[i][1] : regionData.regions[i][0];
regionElement.options[regionElement.length] = new Option(regionData.regions[i][0], val);
}
regionElement.selectedIndex = 0;
if (!regionElement.multiple) { regionElement.selectedIndex = 0 };
}
};

Expand Down
33 changes: 24 additions & 9 deletions source/source-jquery.crs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,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);
Expand All @@ -120,10 +122,10 @@
countryElement.setAttribute("data-crs-loaded", "true");
};

var _initRegionField = function (el) {
var _initRegionField = function(el) {
var customOptionStr = $(el).attr("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;
Expand Down Expand Up @@ -181,11 +183,14 @@
}
};

var _setDefaultRegionValue = function (field, data, val, useShortcode) {
for (var i = 0; i < data.regions.length; i++) {
var _setDefaultRegionValue = function(field, data, val, useShortcode) {
var idx;
var showEmpty = !field.multiple && _showEmptyRegionOption;
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 = (showEmpty) ? i + 1 : i;
field.options[idx].selected = 'selected';
break;
}
}
Expand All @@ -210,10 +215,21 @@
regionElement.options[regionElement.length] = new Option(regionData.regions[i][0], val);
}

regionElement.selectedIndex = 0;
if (!regionElement.multiple) { regionElement.selectedIndex = 0 };
}
};

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];
} else {
return null;
}
}

// in 0.5.0 we added the option for "preferred" countries that get listed first. This just causes the preferred
// countries to get listed at the top of the list with an optional delimiter row following them
Expand Down Expand Up @@ -250,5 +266,4 @@
return {
init: _init
};

}));
12 changes: 12 additions & 0 deletions test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,18 @@ <h4>Example 9</h4>
<select class="crs-country" data-region-id="nine" data-preferred="CA,US,MX" data-preferred-delim="-----"></select>
<select id="nine"></select>

<hr size="1" />

<h4>Example 10</h4>

<p>
This demos the multiple-select option for the region field. Setting <code>data-default-values</code> to a
comma-separated list will pre-select multiple values.
</p>

<select class="crs-country" data-region-id="multi-region" data-default-value='United States'></select>
<select id="multi-region" data-value="shortcode" data-default-values='AL,AZ,CA' multiple></select>

</section>
<script src="dist/crs.min.js"></script>

Expand Down

0 comments on commit 7c7b9be

Please sign in to comment.