<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
var url = "/City.xml";
String.prototype.Trim = function() { return this.replace(/(^/s*)|(/s*$)/g, ""); }
var xmlDoc;
var moz = (typeof document.implementation != 'undefined')
&& (typeof document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
function importXML(file)
{
if (moz)
{
xmlDoc = document.implementation.createDocument("", "doc", null);
}
else if (ie)
{
xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
}
xmlDoc.load(file);
}
importXML(url);
function updateCityState(){
document.getElementById("city").style.display="block";
var value = xmlDoc.getElementsByTagName("value");
var txt="";
var txt2 = "";
var txt3 = "";
var txt4 = "";
var writeCount = 0;
var writeCount1 = 0;
var writeCount2 = 0;
var writeCount3=0;
var writeCount4=0;
if(value!=null&&value.length>0)
{
for(var i=1;i<value.length;i++)
{
var text = value[i].text.substr(0,1);
if(text=="A"||text=="B"||text=="C"||text=="D"||text=="E"||text=="F"||text=="G")
{
txt+="<tr><td style=width:150px; valign=center>"+value[i].text.substring(3,value[i].text.length)+"</td>";
writeCount++;
if (writeCount%5==0)
{
txt+="</br>";
}
document.getElementById("ag").innerHTML =txt;
}
else if(text=="H"||text=="J"||text=="K"||text=="L")
{
writeCount1++;
txt2+="<tr><td style=width:150px; valign=center>"+value[i].text.substring(3,value[i].text.length)+"</td>";
if (writeCount1%5==0)
{
txt2+="</br>";
}
document.getElementById("hl").innerHTML =txt2;
}
else if(text=="M"||text=="N"||text=="O"||text=="P"||text=="Q"||text=="R"||text=="S"||text=="T")
{
writeCount2++;
txt3+="<tr><td style=width:150px; valign=center>"+value[i].text.substring(3,value[i].text.length)+"</td>";
if (writeCount2%5==0)
{
txt3+="</br>";
}
document.getElementById("mt").innerHTML =txt3;
}
else if(text=="W"||text=="X"||text=="Y"||text=="Z")
{
writeCount3++;
txt4+="<tr><td style=width:150px; valign=center>"+value[i].text.substring(3,value[i].text.length)+"</td>";
if (writeCount3%5==0)
{
txt4+="</br>";
}
document.getElementById("wz").innerHTML =txt4;
}
}
}
}
function Showag()
{
document.getElementById("wz").style.display="none";
document.getElementById("hl").style.display= "none";
document.getElementById("mt").style.display="none";
document.getElementById("wz").style.display="none";
document.getElementById("ag").style.display="block";
}
function Showhl()
{
document.getElementById("wz").style.display="none";
document.getElementById("hl").style.display= "block";
document.getElementById("mt").style.display="none";
document.getElementById("wz").style.display="none";
document.getElementById("ag").style.display="none";
}
function Showmt()
{
document.getElementById("wz").style.display="none";
document.getElementById("hl").style.display= "none";
document.getElementById("mt").style.display="block";
document.getElementById("wz").style.display="none";
document.getElementById("ag").style.display="none";
}
function Showwz()
{
document.getElementById("wz").style.display="block";
document.getElementById("hl").style.display="none";
document.getElementById("mt").style.display="none";
document.getElementById("wz").style.display="none";
document.getElementById("ag").style.display="none";
}
</script>
</head>
<body οnlοad="">
<form>
<input id="txtCity" type="text" οnfοcus="updateCityState();" />
<div id="city" style="display:block;">
<span οnclick="Showag();"><a href="#" id="1" >A-G</a></span>
<span οnclick="Showhl();"><a href="#" id="2">H-L</a></span>
<span οnclick="Showmt();"><a href="#" id="0">M-T</a></span>
<span οnclick="Showwz();"><a href="#" id="3">W-Z</a></span>
<div id="ag" style="display:block;">
</div>
<div id="hl" style="display:none;">
</div>
<div id="mt" style="display:none;">
</div>
<div id="wz" style="display:none;">
</div>
</div>
</form>
</body>
</html>