jquery-选择城市
<!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>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
#address{
? border:1px solid #CCCCCC;
? padding:6px 16px 4px 4px;
? background: url(1.gif) no-repeat 80px center;
? width:80px;
? height:20px;
? text-align:center;
? cursor:pointer;
}
*{
? padding:0;
? margin:0;
}
ul{
? margin:0px;
? padding:5px;
? font-size:12px;
}
a{
? color:#009999;
? text-decoration:none;
}
a:hover{
? background-color:#006699;
? color:#FFFFFF;
? text-decoration:underline;
}
li{
? list-style:none;
? width:38px;
? padding:2px 2px;
? display:inline-block;
}
#citys{
? border:1px solid #FF0000;
? width:336px;
? position:relative;
}
#citys span{
? padding:5px;
}
#smallCity{
? border-top:1px solid #CCCCCC;
}
#cancel{
? position:absolute;
? width:20px;
? height:20px;
? cursor:pointer;
? top:0px;
? right:0px;
? border:1px solid #333;
? text-align:center;
? font-size:16px;
? line-height:20px;
? background-color:#ddd;
}
</style>
</head>
<body>
<div id="address">上海</div>
<div id="citys"? style="display:none">
? <span>请选择省份</span>
? <ul id="bigCity">
??? <li><a href="#" href="#">浙江</a></li>
?<li><a id="ah" href="#">安徽</a></li>
?<li><a id="sc" href="#">四川</a></li>
?<li><a id="gz" href="#">贵州</a></li>
?<li><a id="yn" href="#">云南</a></li>
?<li><a id="hn" href="#">湖南</a></li>
?<li><a id="gd" href="#">广东</a></li>
?<li><a id="sd" href="#">山东</a></li>
? </ul>
? <ul id="smallCity" style="display:none">
???? <!--浙江-->
???? <li><a href="#">宁波</a></li>
? <li><a href="#">杭州</a></li>
? <li><a href="#">温州</a></li>
? <li><a href="#">台州</a></li>
? <li><a href="#">绍兴</a></li>
? <!--广东-->
? <li><a href="#">广州</a></li>
? <li><a href="#">深圳</a></li>
? <li><a href="#">中山</a></li>
? <li><a href="#">珠海</a></li>
? <li><a href="#">汕头</a></li>
? <li><a href="#">东莞</a></li>
? <li><a href="#">梅州</a></li>
? <!--安徽-->
? <li><a href="#">合肥</a></li>
? <li><a href="#">芜湖</a></li>
? <li><a href="#">宣城</a></li>
? <li><a href="#">池州</a></li>
? <li><a href="#">六安</a></li>
? <!--四川-->
? <li><a href="#">成都</a></li>
? <li><a href="#">雅安</a></li>
? <li><a href="#">广安</a></li>
? <!--贵州-->
? <li><a href="#">贵阳</a></li>
? <li><a href="#">遵义</a></li>
? <!--云南-->
? <li><a href="#">昆明</a></li>
? <li><a href="#">丽江</a></li>
? <!--湖南-->
? <li><a href="#">长沙</a></li>
? <li><a href="#">株洲</a></li>
? <li><a href="#">常德</a></li>
? <!--山东-->
? <li><a href="#">济南</a></li>
? <li><a href="#">青岛</a></li>
? </ul>
? <p id="cancel">×</p>
</div>
<script type="text/javascript">
/*
*? 选择城市
*? made by keimon
*? 2013-03-21
*/
$(function(){
? $("#address").click(function(){
??? $("#citys").show();
? });
? $("#cancel").click(function(){
??? $("#citys").hide();
? });
? $(".province").click(function(){
??? $("#smallCity").show()
??????????????? .find("li").hide();
?$("."+this.id + "City").parent("li").show();
?$("."+this.id + "City").click(function(){
?? $("#address").html($(this).html())
??????????????? .siblings("#citys").hide();
?});
? })
? $("#bigCity a").click(function(){
?$("#address").html($(this).html())
????????????? .siblings("#citys").hide();
?})
})
</script>
</body>
</html>