In this guide, we'll walk through the process of implementing conditional dropdown menus for selecting a country, its corresponding states, and cities within Wix. The dropdown menus are interlinked, meaning the options for states and cities dynamically change based on the selected country.

To begin, we'll utilize the country-state-city NPM package, which provides an extensive database of countries, states, and cities.

https://www.npmjs.com/package/country-state-city

Explanation:

We begin by importing the necessary modules from the country-state-city package.

Upon Wix page load ($w.onReady), we call the populateCountries function to fill the country dropdown with options.

The populateCountries function fetches all countries and populates the country dropdown.

When a country is selected (dropdownCountries_change event), we call populateStates to fetch and populate the states dropdown corresponding to the selected country.

Similarly, when a state is selected (dropdownStates_change event), we call populateCities to fetch and populate the cities dropdown corresponding to the selected country and state.

Each population function handles errors gracefully by logging them to the console.

The city dropdown's value is reset when either the country or state dropdown changes to ensure consistency.

📺Watch full tutorial here