javascript + state , city, address

Posted on 2009-12-18
Last Modified: 2012-05-08
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

Question by:virafh

    Author Comment

    i got this link:

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

    LVL 22

    Expert Comment

    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

    LVL 22

    Accepted Solution

    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


    Author Comment


    thanks buddy,

    can you also add div code to show address
    LVL 22

    Expert Comment

    not sure what you need, i have coded the div part also, check both initial posts i made

    Author Closing Comment

    Thank you

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now