<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3/jquery.min.js"></script>
<script>
//首先是通过ajax获取文件
var nuldom;
function showpro() {
$.ajax({
url:'ChinaArea.xml',
dataTypes:'xml',
success:function(msg){
nuldom=msg;
$(msg).find('province').each(function (k,v) {
var nm=$(this).attr('province');
var id=$(this).attr('provinceID')
$('#shengfen').append("<option value='"+id+"'>"+nm+"</option>")
});
}
})
}
$(function () {
showpro();
})
//获取城市
function showcity() {
var pid=$('#shengfen option:selected').val();
$('#chengshi').empty();
var sel= $(nuldom).find("[provinceID="+pid+"]");
sel.find('City').each(function () {
var nm1=$(this).attr('City');
var id=$(this).attr('CityID');
$('#chengshi').append("<option value='"+id+"'>"+nm1+"</option>");
}) ;
}
//区域选项
function showarea() {
var pid=$('#chengshi option:selected').val();
$('#quyu').empty();
var sel= $(nuldom).find("[CityID="+pid+"]");
sel.find('Piecearea').each(function () {
var nm2=$(this).attr('Piecearea');
var id=$(this).attr('PieceareaID');
$('#quyu').append("<option value='"+id+"'>"+nm2+"</option>");
})
}
</script>
</head>
<body>
<h1>三级联动</h1>
省份：<select id="shengfen" onchange="showcity()">
<option>--请选择省份--</option>
</select>
城市：<select id="chengshi" onchange="showarea()">
<option>--请选择城市--</option>
</select>
区域：<select id="quyu" onchange="showarea()">
<option>--请选择区域--</option>
</select>
</body>
</html>
