html 根据国家下拉字段的选择显示“省”字段的“州”字段

Posted 2021-05-11

<script>
/*
Unbounce Community :: Tips & Scripts :: Conditional State/ Province Form Field Based on Dropdown 
TS:0002-04-060
***********************
Do not remove this section. It helps our team troubleshoot possible issues and track feature usage and adoption.
*/  
  
  // Conditional Reveal state/province field based on selection of the country dropdown
  // Make sure the "state" field is placed after the country dropdown. Place the province field after the state field
  
(function(){
  var submitBtn = $("#lp-pom-button-65"); // Add ID of Submit Button
  var field = $("#country");  // Add ID of Dropdown field
  
  var conField1 = field.parent().next();
  var conField2 = conField1.next();
  
  var topPos = conField1.position().top;
  conField2.css({top: topPos});        
  
  conField1.css("display", "none");
  conField2.css("display", "none");
  
  var fieldHeight = conField1.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField2).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  var i = true;
  $(field).change(function() {
    if ($(this).val() == "United States") {
      conField1.fadeIn("slow");
      conField2.fadeOut("slow");
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else if ($(this).val() == "Canada") {
      conField1.fadeOut("slow");        
      conField2.fadeIn("slow");
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField1.fadeOut("slow");
      conField2.fadeOut("slow");
      if (conField1.css('display') == 'block' || conField2.css('display') == 'block') { 
        moreFields.animate({top: "-=" + halfSpace}, 600);
        submitBtn.animate({top: "-=" + halfSpace}, 600);
      }  
    }
  });
  var fieldAdjust = function() {
    moreFields.animate({top: "+=" + halfSpace}, 600);
    submitBtn.animate({top: "+=" + halfSpace}, 600);
  }
})();  
</script>