<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>adress</title>
</head>
<body>
<select name="province" id="province" onclick="City()">
<option value="">请选择</option>
</select>
<select name="city" id="city" onclick="County()">
<option value="">请选择</option>
</select>
<select name="county" id="county">
<option value="">请选择</option>
</select>
</body>
</html>
<script src="__PUBLIC__/jquery-3.0.0.min.js"></script>
<script>
xmldom='';
/*获取并显示省份*/
function Province(){
//① ajax去服务器端获得xml文件里边的省份信息
$.ajax({
url:"__PUBLIC__/ChinaArea.xml",
dataType:'xml',
type:'get',
success:function(msg){
xmldom=msg; /*把请求的数据重新赋予xmldom变量*/
var province=$(msg).find('province'); /*在msg里边找到province元素的对象*/
province.each(function(index,value){
var name=$(this).attr('province');
var id=$(this).attr('provinceID');
$('#province').append('<option value="'+id+'">'+name+'</option>');
})
}
})
}
$(function(){
Province();
})
/*获取并显示市*/
function City(){
var provinceID=$('#province').val();
// (xml文档内容"不发生变化"，其不适合做频繁的请求，带宽、服务器资源、用户等待时间有损耗)
if(provinceID==''){ // 说明是空字符串;
$('#city').html("<option value=''>请选择</option>");
$('#county').html("<option value=''>请选择</option>");
return false; // 阻止继续执行;
}else{
$('#city').empty();
$('#county').empty();
var province=$(xmldom).find('province[provinceID='+provinceID+']');
var city=province.find('City');
city.each(function(){
var name=$(this).attr('City');
var id=$(this).attr('CityID');
$('#city').append('<option value="'+id+'">'+name+'</option>');
})
}
County();
}
/*获取并显示县（镇）*/
function County(){
var CityID=$('#city').val();
if(CityID==''){
$('#county').html("<option value=''>请选择</option>");
return false;
}
$('#county').empty();
var city=$(xmldom).find('City[CityID='+CityID+']');
var county=city.find('Piecearea');
county.each(function(){
var name=$(this).attr('Piecearea');
var id=$(this).attr('PieceareaID');
$('#county').append('<option value="'+id+'">'+name+'</option>');
})
}
</script>