• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 539
  • Last Modified:

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

  • 3
  • 3
1 Solution
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

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!! http://javascript.internet.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');

// 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
// 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) {

addLoadEvent(function() {

Open in new window

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now