Country State City Drop Down List | JavaScriptSource

Country State City Drop Down List

Michael Damato Jul 18, 2007

General

This is a simple international country, state, and city drop down list that automatically repopulates the state section based on the country selected, and automatically repopulates the city section based on the state selected. All of this is done without reloading the page. This script could also be used in other formats, e.g., automobiles: type/make/model; or books: publisher/author/title.


Make your selection

Country:
State:
City:

Notes

Format for State lists

  • states['Country1'] = new Array('State1','State2','State3');
  • states['Country2'] = new Array('State1','State2','State3');

Format for City lists

  • cities['Country1'] = new Array();
  • cities['Country1']['State1'] = new Array('City1','City 2');
  • cities['Country1']['State2'] = new Array('City1','City 2');
  • cities['Country2'] = new Array();
  • cities['Country2']['State1'] = new Array('City1','City 2');
  • cities['Country2']['State2'] = new Array('City1','City 2');

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: countryStateCity.js


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(32 comments)

You can use a web service like http://geodata.solutions to generate the code and have it query a database in the cloud. Much easier than coding everything yourself unless you want to. It has a few extra features and the database is kept current.

Andrew Hickey Feb 5, 2017

hi sir I am suresh kumar gupta ,I want dropdown code in ajax servlet.

Suresh Nov 23, 2016

It works perfectly thank u.

Raj Mar 29, 2016

Working great! Thanks a lot for your code.

Alonso Mar 20, 2016

this code is not working when i changed country name suppose i used india upon maxico its not working.plzzz send me code.

shainul Jan 16, 2016