Jquery JavaScript error for State/Province selection not changing when Country changed

Question

I have created a profile with both Country dropdown and State dropdown on it.

When I Preview the profile, the State selections correctly change when I change the country.

https://mydomain.com/wp-admin/admin.php?page=CiviCRM&q=civicrm%2Fadmin%2Fuf%2Fgroup&action=preview&id=15&field=0&context=group

However when I go to the live profile page (even when logged in Admin) the State dropdown does not change. For example changing from United States to Canada, will leave all the US states in the dropdown.

https://mydomain.com/civicrm/profile/create?gid=15&reset=1

Checking the developer console, I see a bunch of jquery errors showing up, such as this:

Using WordPress v6.0.1 and CiviCRM v5.50.3

Answer 1

So in my particular case, the issue was caused by the WordPress theme I was using called Divi.

There is setting in the Divi theme options (Divi > Theme Options > General > Performance) called Defer jQuery And jQuery Migrate which needed to be DISABLED and then everything started working fine.

https://divibooster.com/disable-jquery-deferral-in-divi/