Contact Form State / Province Dropdown

Highlighted
Shopify Partner
60 0 10

Hey there,

I have a site with a contact for where I've used the code 

<select name="country">
  {{ country_option_tags }}
</select>

based on this guide.

My question is, how would I go about using the data-provinces attribute to create a dynamic state/province dropdown upong choosing a country?  

Thanks in advance!

Highlighted
New Member
1 0 0

Hey Kevin. So, when you add {{ country_option_tags }} it will generate list of all countries and will add attribute "data-provinces" to each <option> element. Each "data-provinces" attribute holds the array of states/provinces selected country is linked with.
So I fixed the problem by adding custom select element for state/province which listens for <select> element's change event. When change event is triggered, I read the "data-provinces" array from countries options and populate states/provinces dropdown element with options taken from "data-provinces" array.

Although my answer comes 3 years later, I hope it will help someone!
Cheers

0 Likes