标签：
这是一个小练习，主要是学习如何使用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>
标签：
原文地址：http://www.cnblogs.com/alisayuan/p/4747419.html
