> function selectTown(country, state, town) {
> $('#country').val(country);
> $('#country').change(); // <- this will load the states in the select
> // once the country has been selected
> // and select element containing states has been populated, then do
> // $('#state').val(state);
> // $('#state').change();
How about this. The country change handler will make an ajax request.
Before starting that request you could set the state and town input
autocomplete fields to the values passed to selectTown and clear the
state select. In the success handler for the state ajax request,
populate the state select and see if the value in the state
autocomplete matches one of these values. If so, set the state select
value and fire its change event. Do a similar thing in the state
change handler so that town is populated and selected properly.
Ajax requests are asynchronous, so the user can still type or click
while the ajax is going on. I wasn't sure if the user actually saw the
autocomplete input fields, but if they did it would be perfectly fine
for them to type in a new state/town name different than the one
passed to selectTown while the ajax is in progress. The match occurs
when the ajax completes and it will match whatever is in the
autocomplete field at that instant. If you didn't want them to do that
for some reason, you could set disabled=true on those fields while the
ajax was in progress.
