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

Notes

Created by: Michael J. Damato
Web Site: http://developing.damato.net/
Posted: July 18, 2007

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Michael J. Damato | http://developing.damato.net/ */
// State lists
var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta']          = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario']          = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua']       = new Array('Ciudad Juárez','Chihuahua');
cities['Mexico']['Jalisco']         = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Florida']    = new Array('Miami','Orlando');
cities['United States']['New York']   = new Array('Buffalo','new York');


function setStates() {
  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];
  changeSelect('state', stateList, stateList);
  setCities();
}

function setCities() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  cityList = cities[cntrySel.value][stateSel.value];
  changeSelect('city', cityList, cityList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setStates();
});

Head

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


<script type="text/javascript" src="countryStateCity.js"></script>

Body

Paste this code into the BODY section of your HTML document


<fieldset style="width: 230px;">
<legend><strong>Make your selection</strong></legend>
<p>
<form name="test" method="POST" action="processingpage.php">
<table>
<tr>
<td style="text-align: left;">Country:</td>
<td style="text-align: left;">
<select name="country" id="country" onchange="setStates();">
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="United States">United States</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">State:</td>
<td style="text-align: left;">
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a Country</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="city"  id="city">
  <option value="">Please select a Country</option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>

Leave a Response

(20 comments)

hi.. i have also implemented the same code for multiple states and respective cities,its working but the problem is while storing in database it is storing array's index value please help me.... :(

venkatesh Jul 17, 2012

No. You would need to a server-side script, along with a database.

Lee Jan 16, 2009

Do you have this for all the countries/states/cities in the world?

chris Dec 11, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

It works fine within one fieldset but doesn't for a second fieldset in the same form. What am I doing wrong?

John Huff Aug 16, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details