There are a few ways to approach this, but I will share one that I have used before:
First, I create a hidden text field on the form and initialise that field with a JSON string that contains my Country/State/City objects. This could be fetched from a datasource, pre-populated or just be static when the form initialises. I then created a javascript object to behave as a dictionary and used the HTML5 localstorage to persist this dictionary, so I could look it up from each of the dropdown lists without re-parsing the JSON every time. AEM Forms has a few libraries available to it to process the JSON string (Underscore.js, jQuery, etc) so you dont need to write all the collection manipulation routines.
Second, I would populate the First dropdown list using the first-level country object names. e.g. on initialise, get the list of names from the localstorage object, sort your list (if required) then assign this.items=[your array of country names].
When the First list is selected, in the Country list event change handler, I look up the dictionary for the Country item that was selected and populate the objects in the second list. Same goes for the third list. Setting up your objects from the JSON string you parsed is key to this so these lookups are fast. Its not a big dataset so it should be fairly quick.
hope this helps.
Adaptive Forms Class: GuideDropDownList
Underscore.js
http://api.jquery.com/jquery.parsejson/
javascript - Storing Objects in HTML5 localStorage - Stack Overflow
