<!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=utf-8" />
<title>省市區三級級聯</title>
<script src="jquery-1.8.0.js"></script>
<script>
var d;
$(document).ready(function (){
$.ajax({
url:"city.xml",
dataType:"xml",
success:function(data){
d = data;
$(data).find("province").each(function (i){
//往province中添加值
$("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#province");
});
chpro($("#province").attr("value")); //選中的值傳給chpro函數
}
});
});
var c;
function chpro(val){
$("#city").empty(); //清空
//遍歷province的name為val下的city
$(d).find("province[name='"+val+"']").find("city").each(function (i){
//往city中添加值 設置屬性value的值為當前對象的屬性name的值
$("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#city");
c = val;
chcity($("#city").attr("value"));
});
}
function chcity(val){
$("#area").empty();
//遍歷province的name為c下的city的name為val下的area
$(d).find("province[name='"+c+"']").find("city[name='"+val+"']").find("area").each(function (i){
$("<option></option>").html($(this).attr("name")).attr("value",$(this).attr("name")).appendTo("#area");
});
}
</script>
</head>
<body>
<form id="myform">
地址：<select id="province" onchange="chpro(this.value)" style="width:150px"></select>
<select id="city" onchange="chcity(this.value)" style="width:150px"></select>
<select id="area" style="width:150px"></select>
</form>
</body>
</html>