<?xml version="1.0" encoding="utf-8" ?>
<countries>
<country name="INDIA">
<state>Andhra Pradesh </state>
<state>Arunachal Pradesh </state>
<state>Assam</state>
<state>Bihar </state>
<state>Chhattisgarh </state>
</country>
<country name="USA">
<state>Alabama</state>
<state>Alaska</state>
<state>Arizona</state>
<state>Arkansas</state>
<state>California</state>
</country>
<country name="RUSSIA">
<state>Almetyevsk</state>
<state>Arkhangelsk</state>
<state>Bryansk</state>
<state>Chelyabinsk</state>
<state>Dubna</state>
</country>
<country name="MEXICO">
<state>Aguascalientes</state>
<state> Baja California</state>
<state> Baja California Sur</state>
<state> Campeche</state>
<state> Chiapas</state>
</country>
</countries>
Step 2: Now create a webpage and write the javascript function for select the states corresponding to country like as follows:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="TestWebSite._Default" %>
<!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 runat="server">
<title>Country and states</title>
<script language="javascript">
var XmlHttp;
function CreateXmlHttp()
{
try
{
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
{
XmlHttp = new XMLHttpRequest();
}
}
function HandleResponse()
{
// To make sure receiving response data from server is completed
if(XmlHttp.readyState == 4)
{
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttp.status == 200)
{
//window.alert("i am here");
ClearAndSetStateListItems(XmlHttp.responseText);
}
else
{
alert("There was a problem retrieving data from the server." );
}
}
}
function CountryListOnChange()
{
var countryList = document.getElementById("countrylist");
//Getting the selected country from country combo box.
var selectedCountry = countryList.options[countryList.selectedIndex].value;
var requestUrl = "States.aspx" + "?SelectedCountry=" + encodeURIComponent(selectedCountry);
CreateXmlHttp();
// If browser supports XMLHTTPRequest object
if(XmlHttp)
{
//Setting the event handler for the response
XmlHttp.onreadystatechange = HandleResponse;
//Initializes the request object with GET (METHOD of posting),
XmlHttp.open("GET", requestUrl, true);
//Sends the request to server
XmlHttp.send(null);
}
}
function ClearAndSetStateListItems(countryNode)
{
var stateList = document.getElementById("stateList");
//Clears the state combo box contents.
for (var count = stateList.options.length-1; count >-1; count--)
{
stateList.options[count] = null;
}
var stateNodes = countryNode.split("-");
//window.alert(stateNodes)
var textValue;
var optionItem;
//Add new states list to the state combo box.
for (var count = 0; count < stateNodes.length; count++)
{
textValue = (stateNodes[count]);
optionItem = new Option( textValue, textValue, false, false);
//window.alert(textValue);
//stateList.appendChild(textValue);
stateList.options[stateList.length] = optionItem;
}
}
</script>
</head>
<body>
<form id="Form1" method="post" runat="server">
<table width="400px" cellpadding="0" cellspacing="0" bordercolor=navy>
<tr>
<td><b>Country </b></td>
<td>
<select onchange="CountryListOnChange();" id="countrylist" name="countrylist" runat="server"style="width: 115px">
<option selected value="Select Country"></option>
</select>
</td>
<td><b>State </b></td>
<td>
<select id="stateList" style="width: 115px">
<option selected></option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
online business degree
Ashworth College