这是一个小练习，主要是学习如何使用jquery实现省市区的三级级联展示，主要参考了：http://www.jb51.net/article/66948.htm，在此表示感谢，(*^__^*) 嘻嘻……
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册新用户</title>
<link href="../css/login.css" rel="stylesheet" />
</head>
<body>
<div id="top">
<h3 style="color:#ff0000">欢迎新用户注册</h3>
</div>
<div id="middle">
<p><b>个人基本信息</b></p>
<form id="myform" method="post">
用户名：<input type="text" name="username" id="username" value="用户名由4-6个字符组成" />
密码：<input type="password" name="password" id="password"/><br />
性别：<input type="radio" name="sex" value="female"/>女
<input type="radio" name="sex" value="male"/>男<br />
电话：<input type="text" id="phonenum"/><br />
邮箱地址：<input type="text" id="email"/><br />
联系地址：<select id="province" style="width:100px">
<option value="0" id="s1">请选择省份</option>
</select>
<select id="city" style="width:100px">
<option value="0" id="s2">请选择城市</option>
</select>
<select id="area" style="width:100px">
<option value="0" id="s3">请选择县级市</option>
</select><br />
<input type="submit" value="submit" id="mit" onsubmit="validate()"/>
<input type="reset" value="reset" id="set"/>
</form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/login.js"></script>
</body>
</html>
$(document).ready(function () {
//省
$.ajax({
url: "../citys.xml",
success: function (xml) {
$(xml).find("province").each(function () {
var pro = $(this).attr("name");
$("#province").append("<option>" + pro + "</option>");
})
}
})
//市
$("#province").change(function () {
//$("#city>option").remove();
$("#city").find("option").remove();
$("#area>option").remove();
var pname = $("#province").val();
$.ajax({
url: "../citys.xml",
success: function (xml) {
//查找省下一级的所有市
$(xml).find("province[name=‘" + pname + "‘]>city").each(function () {
var city = $(this).attr("name");
$("#city").append("<option>" + city + "</option>");
});
//查找市下一级所有的县级市或者区
var cname = $("#city").val();
$(xml).find("city[name=‘" + cname + "‘]>area").each(function () {
var area = $(this).attr("name");
console.log(cname);
$("#area").append("<option>" + area + "</option>");
});
}
});
});
//县级市或者区
$("#city").change(function () {
$("#area>option").remove();
var cname = $("#city").val();
$.ajax({
url: "../citys.xml",
success: function (xml) {
//查找市下一级的地级市或者区
$(xml).find("city[name=‘" + cname + "‘]>area").each(function () {
var area = $(this).attr("name");
$("#area").append("<option> " + area + "</option>");
});
}
});
});
});
#top{
text-align:center;
padding-bottom:5px;
border-bottom:dotted;
}
#middle{
font-size:10px;
}
#middle #username,#password,#phonenum,#email{
width:150px;
height:15px;
font-family:‘Lucida Sans‘, ‘Lucida Sans Regular‘, ‘Lucida Grande‘, ‘Lucida Sans Unicode‘, Geneva, Verdana, sans-serif;
font-size:5px;
margin-top:8px;
}
#middle #myform #province,#city,#area{
font-size:8px;
font-family:‘Times New Roman‘, Times, serif;
margin-top:8px;
}
#middle #mit,#set{
margin-top:10px;
}
<?xml version="1.0" encoding="utf-8" ?>
<root>
<province name="湖北省">
<city name="荆门市">
<area name="钟祥市"></area>
<area name="沙洋市"></area>
<area name="京山县"></area>
<area name="东宝区"></area>
<area name="象山区"></area>
</city>
<city name="武汉市">
<area name="武昌区"></area>
<area name="汉口"></area>
<area name="汉阳"></area>
<area name="东西湖"></area>
<area name="新洲"></area>
</city>
<city name="黄冈市">
<area name="武穴市"></area>
<area name="蕲春县"></area>
<area name="浠水县"></area>
<area name="黄梅县"></area>
<area name="孝感县"></area>
</city>
</province>
<province name="广东省">
<city name="广州市">
<area name="天河区"></area>
<area name="白云区"></area>
<area name="越秀区"></area>
<area name="萝岗区"></area>
<area name="番禺区"></area>
</city>
<city name="深圳市">
<area name="龙岗区"></area>
<area name="福田区"></area>
<area name="南山区"></area>
<area name="龙华新区"></area>
<area name="宝安区"></area>
</city>
</province>
</root>
时间： 2024-10-17 02:48:41