javascript + state , city, address

Dear Friends,

i want a javascript which have 2 drop downlist state and city

city will listed based on state selection

and address will diplay based on city

Who is Participating?
kadabaConnect With a Mentor Commented:
the js page.. save it as countryStateCity.js.
Have only added to the code.

check and let me know... only 125..

/* This script and many more are available free online at
The JavaScript Source!!
Created by: Michael J. Damato | */
// 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');

// Address lists

var address = new Array();

address['Canada'] = new Array();
address['Canada']['Alberta']          = new Array();
address['Canada']['British Columbia'] = new Array();
address['Canada']['Ontario']          = new Array();
address['Canada']['Alberta']['Edmonton'] = new Array('Address1','Address2');
address['Canada']['Alberta']['Calgary']  = new Array('Address3','Address4');
address['Canada']['British Columbia']['Victoria'] = new Array('Address5','Address6');
address['Canada']['British Columbia']['Vancouver'] = new Array('Address7','Address8');
address['Canada']['Ontario']['Toronto'] = new Array('Address9','Address10');
address['Canada']['Ontario']['Hamilton'] = new Array('Address11','Address12');

address['Mexico'] = new Array();
address['Mexico']['Baja California']          = new Array();
address['Mexico']['Chihuahua'] = new Array();
address['Mexico']['Jalisco']          = new Array();
address['Mexico']['Baja California']['Tijauna'] = new Array('Address13','Address14');
address['Mexico']['Baja California']['Mexicali']  = new Array('Address15','Address16');
address['Mexico']['Chihuahua']['Ciudad Juárez'] = new Array('Address17','Address18');
address['Mexico']['Chihuahua']['Chihuahua'] = new Array('Address19','Address20');
address['Mexico']['Jalisco']['Guadalajara'] = new Array('Address21','Address22');
address['Mexico']['Jalisco']['Chapala'] = new Array('Address23','Address24');

address['United States'] = new Array();
address['United States']['California']          = new Array();
address['United States']['Florida'] = new Array();
address['United States']['New York']          = new Array();
address['United States']['California']['Los Angeles'] = new Array('Address25','Address26');
address['United States']['California']['San Francisco']  = new Array('Address27','Address28');
address['United States']['Florida']['Miami'] = new Array('Address29','Address30');
address['United States']['Florida']['Orlando'] = new Array('Address31','Address32');
address['United States']['New York']['Buffalo'] = new Array('Address33','Address34');
address['United States']['New York']['new York'] = new Array('Address35','Address36');

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

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

function setAddress() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel =  document.getElementById('city');	
  addressList = address[cntrySel.value][stateSel.value][citySel.value];
  changeSelect('address', addressList, addressList);

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
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {

addLoadEvent(function() {

Open in new window

virafhAuthor Commented:
i got this link:

its exact as my requirement but i just to add address filed, please check and implement it

html page:

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

<fieldset style="width: 230px;">
<legend><strong>Make your selection</strong></legend>
<form name="test" method="POST" action="processingpage.php">
<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>
<td style="text-align: left;">State:</td>
<td style="text-align: left;">
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a State</option>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="city"  id="city" onchange="setAddress()";>
  <option value="">Please select a City</option>
<td style="text-align: left;">Address:</td>
<td style="text-align: left;">
<select name="address"  id="address">
  <option value="">Please select an Address</option>

Open in new window

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

virafhAuthor Commented:

thanks buddy,

can you also add div code to show address
not sure what you need, i have coded the div part also, check both initial posts i made
virafhAuthor Commented:
Thank you
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.