• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Forms / Country State City Drop Down List

Country State City Drop Down List

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>

Forms

Related Snippets:

  • Input Mask
  • Trigger an event
  • Automatically expand a textarea as the user types
  • Create a range slider

Primary Sidebar

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2025 JavaScriptSource.com

  • About
  • Privacy Policy
  • FAQ
  • Jobs For Developers