Country State City Drop Down List

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.

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://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>