State

State/Country/City

  Download

State/Country/City
Country:	select country India Australia United States
State:	select state
City:	select city

state.html

In this tutorial shows selecting country/state/city one by one. like first we have to select country then automatically state fields are displayed after that city fields like wise.

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<scritp>javascript
</script>
</head>
<div id="container">
<select name="country" id="country" onchange="setStates();">
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="United States">United States</option>
</select>
<name="state" id="state" onchange="setCities();">
<option value="">Select State</option>
</select>
<name="city" id="city" >
<option value=" ">Select city</option>
</select>
</div>
</div>
</html>

script.js

var states = new Array();
//State list
states['India'] = new Array('select','AndhraPradesh','ArunachalPradesh','Assam','Bihar');
states['Australia'] = new Array('select','New South Wales','Chihuahua','Jalisco');
states['United States'] = new Array('select','California','Florida','New York');
//City lists
var cities = new Array();
cities['India'] = new Array();
cities['India']['AndhraPradesh'] = new Array('','Nellore','Chittur','cudapa');
cities['India']['ArunachalPradesh'] = new Array('','aruna','Vancouver');
cities['India']['Assam'] = new Array('','assam','Hamilton');
cities['Australia'] = new Array();
cities['Australia']['New South Wales'] = new Array('','Tijauna','Mexicali');
cities['Australia']['Chihuahua'] = new Array('','Ciudad Juárez','Chihuahua');
cities['Australia']['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
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();
});

Backto Tutorial