CRM-14996 - Support multi-valued fields for state/country chain-select

[civicrm-core.git] / templates / CRM / common / stateCountry.tpl

diff --git a/templates/CRM/common/stateCountry.tpl b/templates/CRM/common/stateCountry.tpl
index 90f7274d5842ea8475e752288f8d0d90fe1d3261..b16e8a47c0b46b6e6d309edfd88ebf63f2dab2a4 100644 (file)
--- a/templates/CRM/common/stateCountry.tpl
+++ b/templates/CRM/common/stateCountry.tpl
@@ -27,55 +27,63 @@
 <script type="text/javascript">
   {literal}
   CRM.$(function($) {
+    var $form = $('form.{/literal}{$form.formClass}{literal}');
     function chainSelect(e) {
       var info = $(this).data('chainSelect');
       var val = info.target.val();
       var multiple = info.target.attr('multiple');
       var placeholder = $(this).val() ? "{/literal}{ts escape='js'}Loading{/ts}{literal}..." : info.placeholder;
-      !multiple && info.target.html('<option value="">' + placeholder + '</option>');
+      if (multiple) {
+        info.target.html('').prop('disabled', true).crmSelect2({placeholder: placeholder});
+      }
+      else {
+        info.target.html('<option value="">' + placeholder + '</option>').prop('disabled', true).crmSelect2();
+      }
       if ($(this).val()) {
-        if (multiple) {
+        $.getJSON(info.callback, {_value: $(this).val()}, function(data) {
           var options = '';
-          $.each($(this).val(), function(index, value) {
-            $.getJSON(info.callback, {_value: value}, function(data) {
-              $.each(data, function() {
-                if (this.value) {
-                  options += '<option value="' + this.value + '">' + this.name + '</option>';
-                }
-              });
-              info.target.html(options).val(val).trigger('change');
-            });
-          });
-        }
-        else {
-          $.getJSON(info.callback, {_value: $(this).val()}, function(data) {
-            var options = '';
+          function buildOptions(data) {
             $.each(data, function() {
-              if (this.name) {
+              if (this.children) {
+                options += '<optgroup label="' + this.name + '">';
+                buildOptions(this.children);
+                options += '</optgroup>';
+              }
+              else if (this.value || !multiple) {
                 options += '<option value="' + this.value + '">' + this.name + '</option>';
               }
+              else {
+                info.target.crmSelect2({placeholder: this.name});
+              }
             });
-            info.target.html(options).val(val).trigger('change');
-          });
-        }
+          }
+          buildOptions(data);
+          info.target.html(options).val(val).prop('disabled', false).trigger('change');
+        });
+      }
+      else {
+        info.target.trigger('change');
       }
     }
+    function initField(selector) {
+      return $(selector, $form).css('min-width', '20em').crmSelect2();
+    }
     {/literal}
     {foreach from=$config->stateCountryMap item=stateCountryMap}
-      {if $stateCountryMap.country && $stateCountryMap.state_province}
-        $('select[name="{$stateCountryMap.country}"], #{$stateCountryMap.country}').data('chainSelect', {ldelim}
-          callback: CRM.url('civicrm/ajax/jqState'),
-          target: $('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}'),
-          placeholder: "{ts escape='js'}(choose country first){/ts}"
-          {rdelim}).on('change', chainSelect);
-      {/if}
       {if $stateCountryMap.state_province && $stateCountryMap.county}
-        $('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}').data('chainSelect', {ldelim}
+        $('select[name="{$stateCountryMap.state_province}"], select#{$stateCountryMap.state_province}', $form).data('chainSelect', {ldelim}
           callback: CRM.url('civicrm/ajax/jqCounty'),
-          target: $('select[name="{$stateCountryMap.county}"], #{$stateCountryMap.county}'),
+          target: initField('select[name="{$stateCountryMap.county}"], #{$stateCountryMap.county}'),
           placeholder: "{ts escape='js'}(choose state first){/ts}"
         {rdelim}).on('change',  chainSelect);
       {/if}
+      {if $stateCountryMap.country && $stateCountryMap.state_province}
+        initField('select[name="{$stateCountryMap.country}"], select#{$stateCountryMap.country}').data('chainSelect', {ldelim}
+          callback: CRM.url('civicrm/ajax/jqState'),
+          target: initField('select[name="{$stateCountryMap.state_province}"], #{$stateCountryMap.state_province}'),
+          placeholder: "{ts escape='js'}(choose country first){/ts}"
+        {rdelim}).on('change', chainSelect).change();
+      {/if}
     {/foreach}
     {literal}
   });