<script type="text/javascript">
  // Split a state dropdown into <optgroup> tag based on country. Each optgroup contains the
  // states/provinces for that country.  Currently Canada and the US.
  (function() {
    // Put 'US' before 'CN' to see states first.
    var labels = { 'CN': 'Canada', 'US': 'United States' };
    // Change "field-address-state" to "State" for Classic.
    var stateSelector = 'select[name="field-address-state"]';
    var provinces = 'BC,MB,NB,NL,SK,NT,NU,NF,NS,ON,PE,QC,YT'.split(',');
    var stateField = document.querySelector(stateSelector);
    var states = Array.from(stateField.querySelectorAll('option')).slice(1);
    var optgroups = Object.keys(labels).reduce(function(a, n) {
        a[n] = document.createElement('optgroup');
        a[n].setAttribute('label', labels[n]);
        stateField.appendChild(a[n]);
        return a;
    }, {});
    var reducer = (a, e) => {
        var key = (provinces.indexOf(e.value) != -1 ? 'CN' : 'US');
        a[key].appendChild(e);
        return a;
    }
    states.reduce(reducer, optgroups);
   })();
</script>