how to display country,state,city in drop down (without database)

**Dormilich** · Aug 7 '14, 11:24 AM

where do you save the country-state-city relations?

**Exequiel** · Aug 8 '14, 05:38 AM

you can use array for countries, states and cities, but i suggest its better to code it in javascript, try this code. :)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
<script type="text/javascript">

// State lists
var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Philippines'] = new Array('Manila','Albay','Cam-Sur');
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['Philippines'] = new Array();
cities['Philippines']['Manila'] = new Array('Paranaque','Quezon City');
cities['Philippines']['Albay']       = new Array('Legazpi City','Camalig');
cities['Philippines']['Cam-Sur']         = new Array('Naga','ehem');

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]);
  }
}

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();
});
</script>

</head>

<body>

     <form>
        <table>
        <tr>
        <td style="text-align: left;">Country:</td>
        <td style="text-align: left;">
            <select name="country" id="country" onchange="setStates();">
            <option value="Philippines">Philippines</option>
              <option value="Canada">Canada</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>



</body>
</html>

**canelle** · Sep 4 '14, 06:35 AM

I guess you need database to store the cities data. Geodatasource .com has it but it is not free. You may want to get the data from geonames.

**mukherjee** · Sep 10 '14, 04:56 AM

Hard code mapping of country, state and city in your code, see above javascript example.

how to display country,state,city in drop down (without database)

how to display country,state,city in drop down (without database)

Comment

Comment

Comment

Comment