CartThrob: Setting up different state/region options in checkout process

Question

I've got a site running CartThrob v2.7. For the checkout process, I'm using {exp:cartthrob:state_select} and {exp:cartthrob:country_select} tags to help populate the checkout form's "State" and "Country" select menus. Since the site in question primarily deals with American customers, those menus default to U.S. options.

But is there an easy way to use those same tags to make the form work with non-U.S. options? Basically, I'd like the user to be able to select "Canada" from the "Country" menu, and have the "State" menu switch to displaying Canadian provinces.

I know CartThrob can handle different locales but the docs implied that that's primarily for initial config. I'm looking for something "on the fly." Right now, it looks like I'd have to manually build the "State" and "Country" menus instead of using those CartThrob tags, make sure they automatically select the appropriate options for any currently logged-in users, and then use JS to repopulate the "State" menu based on what's selected in the "Country" menu. Which is fine, but I was hoping for an easier solution.

Answer 1

That page you linked to should be helpful even though it's more for showing in one list instead of using a JS helper. It has a pre-filled list of man countries and their states, so if you were writing your own EE plugin, you could include that files and use its arrays to build separate dropdowns from there.

You can also consider using something like this: https://devot-ee.com/add-ons/reegion-select