<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
width:200px;
border:1px solid #ffc264;
}
ul{
margin:0;
}
li{
margin:0;
font-size:9pt;
text-align:left;
display:block;
float:left;
padding:4px;
}
a:link, a:visited{
text-decoration:none;
color:#0099FF;
}
a:hover{
text-decoration:underline;
}
-->
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
addr.style.display="none";
}
//关闭所有显示
function closeDiv(){
addr.style.display="none";
}
//备选城市的数组
var cityArray=
[
["city","城市"],
["sz","深圳"],
["dg","东莞"],
["gz","广州"],
["zs","中山"],
["hz","惠州"],
["zh","珠海"]
];
//城市下的区镇等地点的数组
//深圳下的区
var sz=
[
["lh","罗湖"],
["ft","福田"],
["yt","盐田"],
["ns","南山"],
["ba","宝安"],
["lg","龙岗"]
];
//东莞下的镇
var dg=
[
["ca","长安"],
["dl","大郎"],
["tx","塘厦"],
["lb","廖步"],
["hm","虎门"],
["dls","大岭山"]
]
//显示所有城市
function showcity()
{
strhtm="<ul id='"+cityArray[0][0]+"'><li style='background-color:#feeed5;width:192px;text-align:left;'><a href='javascript:closeDiv()'>[关闭]</a><li>";
for (i=1;i<cityArray.length;i++)
{
strhtm=strhtm+"<li><a href='javascript:showX("+cityArray[i][0]+");'>"+cityArray[i][1]+"</a><li>";
}
strhtm=strhtm+"</ul>";
addr.innerHTML=strhtm;
//alert(strhtm);
addr.style.display="block";
}
//显示所选城市下的区或镇
function showX(ok){
strhtm="<ul><li style='background-color:#feeed5;width:192px;text-align:left;'><a href='javascript:showcity()'>返回城市列表</a> <a href='javascript:closeDiv()'>[关闭]</a><li>";
for(i=0;i<ok.length;i++)
{
strhtm=strhtm+"<li id='"+ok[i][0]+"'><a href=javascript:inputvalue('"+ok[i][0]+"');>"+ok[i][1]+"</a><li>";
}
strhtm=strhtm+"</ul>";
addr.innerHTML=strhtm;
}
//把所选的区或镇的值传到text中
function inputvalue(ok){
//alert(ok);
var inputL=document.getElementById("address");
var lilabel=document.getElementById(ok);
var livalue=lilabel.innerText;
//alert(lilabel);
inputL.value=livalue;
addr.style.display="none";
}
</script>
</head>
<body>
<input type="text" name="address" id="address" onfocus="showcity()"/>
<div id="addr"></div>
</body>
</html>
