html 如果美国显示状态下拉列表

Posted 2021-05-10

<!--
** Create a "State" dropdown in the form: https://d.pr/i/F1ljeu
** Do NOT make it required: https://d.pr/i/G6MZQ4
** Place the submit button over the the last field of the form: https://d.pr/i/5yvBXB
-->
 
<!-- Paste in Javascript->Footer --> 
<script>
var stateField = $('select[name=\'State\']').parents('.form-block-select');
var stateFieldLabel = $('select[name=\'State\']').parents('.form-block-select').prev('label');
var formButton = stateField.closest('form').find('.form-btn-geometry');
stateField.addClass('hidden');
stateFieldLabel.addClass('hidden');

$('select[name=\'Country\']').change(function () {
  if ($(this).val() === 'United States') {
    window.___selected_country = 'US';
    stateField.removeClass('hidden');
    stateFieldLabel.removeClass('hidden');
    formButton.css('top', formButton.closest('form').height() + 20 + 'px');
  } else {
    stateField.addClass('hidden');
    stateFieldLabel.addClass('hidden');
    if (window.___selected_country === 'US') {
      formButton.css('top', formButton.closest('form').height() + 15 + 'px');
    }
    window.___selected_country = '';
  }
});

window.__custom_form_validations = [
  {
    fieldName: 'State',
    validationFn: function (input) {
      return {
        isValid: window.___selected_country !== 'US' || !!input.value,
        message: window._Translate.get('is required'),
      };
    },
  },
];
</script>




<!-- Paste in HTML/CSS->Head --> 
<style>
.hidden {
	display: none;
}

.form-btn-geometry {
	transition-property: top;
	transition-duration: 100ms;
	transition-timing-function: linear;
}
</style>