JQUERY做的三级联动下拉（jquery解析XML）
页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery xml解析</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
?$(document).ready(function(){
????$.ajax({
?????url : "city.xml",
?????success : function(xml) {
??????$(xml).find("province").each(function(){
???????var t = $(this).attr("name");//this->??
????????$("#DropProvince").append(
??????????"<option>" + t + "</option>");
???????});
?????}
????});
????
???//二级的菜单
????$("#DropProvince").change(
??????function() {
???????$("#sCity>option").remove();
???????var pname = $("#DropProvince").val();
???????//alert(pname);//得到一级选中的选项
???????$.ajax({
????????url : "city.xml",
????????success : function(xml){
?????????$(xml).find("province[name='" + pname+ "']>city").each(function(){
???????????var c = $(this).attr("name")
???????????//alert(c);
???????????$("#sCity").append("<option>"+ c + "</option>");
?????????});
????????}
???????});
????});
????
????//三级的菜单??
????$("#sCity").change(
??????function() {
???????$("#address>option").remove();
???????var pname1 = $("#sCity").val();
???????$.ajax( {
????????url : "city.xml",
????????success : function(xml) {
?????????$(xml).find("city[name='" + pname1+ "']>address").each(function() {
????????????$("#address").append("<option>"+ $(this).text()+ "</option>");
???????????});
????????}
???????});
????});
?});
</script>
</head>
<body>
<form id="form1">
<div>
?<select id="DropProvince" style="width: 60px;">
??<option>请选择</option>
?</select><h1></h1>
?<select id="sCity" style="width: 60px;">
??<option>请选择</option>
?</select>
?<select id="address" style="width: 60px;">
??<option>请选择</option>
?</select>
</div>
</form>
</body>
</html>
?
?
xml代码
<?xml version="1.0" encoding="UTF-8"?>
<provinces>?
?<province name="湖北">?
??<city name="武汉">武汉</city>?
?</province>?
?<province name="湖南">?
??<city name='株洲'></city>?
??<city name='长沙'></city>?
?</province>?
?<province name="广东">?
??<city name="广州">
???<address>白云区</address>
???<address>越秀区</address>
???<address>番禹区</address>
??</city>?
??<city name="深圳">
???<address>福田区</address>
???<address>罗湖区</address>
???<address>南山区</address>
???<address>宝安区</address>
??</city>
?</province>?
</provinces>
