This is a bug and I have been trying to find a solution. Inline text gets erased somehow when there are visibility rules. I cant even set the text with jQuery.
Did you ever find a workaround?
Update - this is working for my simple need:
I configured visibility rules to default to show state field and make it hide if any country is selected besides US
the first option has to be "state:" so it shows up
you could add a listener and switch which option has the selected="selected" attribute based on which country, but at that point you might as well just write your own visibility logic.
timeout is because I am embedding the marketo form
<script>
setTimeout(function(){
jQuery("#State option:first").attr('selected','selected');
}, 6000);
</script>
Hmm, you should never use timeouts to (attempt to) predict call order in an asynchronous environment. It's bad programming practice and destined to fail.
Forms 2.0 includes a robust event API that's designed to eliminate the "likely call order" antipattern and race conditions. If you want to do something after an embedded form is ready, just do it in an onReady listener (the 4th argument to MktoForms2.loadForm). The form element is guaranteed to be in the DOM at the time it is called.
P.S. No reason to use jQuery to set the selected index: the Forms 2.0 method form.setValues() exists for this purpose.
By the way, while there are many ways to skin this cat, one simple way is to add all your states/provinces/cantons to the same list, prefixing each with the country name:
This list becomes the template from which you draw or discard elements. Working with SELECTs is much easier when you maintain an out-of-band template element like this.
Then use some boilerplate to populate the live SELECT from the template as needed: CodePen - MktoForms2 :: Dependent Country-State/Province