UI Design - design pattern for city/country drop down? (ASP.NET MVC)

Question

What is the best way to do a city/country dropdown pair in ASP.NET MVC?

I see lots of places with country above city, but that's unnatural: in real life we write city/country. I've used city, then country, but the problem is that the user then has to go backwards after changing the country.

The other problem is what do you do about cities/countries not in your list? If city/country are both drop downs, then the user cant type their own city if it is missing. But if you have a dropdown and a textbox, that makes it unwieldy (you end up with 4 controls to enter 2 pieces of data).

Are there any examples websites where the city/country dropdown pair are done in a very useable and clear manner?

Answer 1

Don't use a drop-down for cities.

1. You will never have a complete list.
2. Users don't want to search for their city in the list.
3. Users are used to typing their home city.
4. Most browsers have form-filling option for common field names like "city".

You can offer an auto-complete textbox instead of a drop-down list. This has most of the advantages of a drop-down list without the side effects.

Answer 2

When doing that kind of hierarchical selection it's not necessarily unnatural to put the country on top since changing it will change the available city selection and users are used to that with a web app (as you say it is common). I think the only time it would appear unnatural if it's being used for a template that looks like a mailing address.

For handling the missing city or country you can add a "[NOT IN LIST]" selection at the bottom of each select, which can dynamically reveal a textbox to type it in. Of course if it's a new country then you would add a textbox for both the country and city since it would by definition not be there. Then the controls are only shown for cases where they are needed.

And all of this is best handled by JQuery for the UI via JSON methods in the controller.