Country State City Drop Down List | JavaScriptSource

Country State City Drop Down List

Michael Damato Jul 18, 2007


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



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


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


Paste this code into the BODY section of your HTML document

Leave a Response


Awesome Michael. Thanks!!

Chris Oct 24, 2015

do you have Dynamic color display in drop down list box using codeigniter

raji Jun 29, 2015

Hello our code is not working please change it and mail me or delete your blog. thanx

Akshay jani Jun 14, 2015

the code was very helpful thanks for the help :)

saurabh vyas Mar 29, 2015

Thank you! Simple and great.

Santosh May 17, 2014