地区三级联动--省份province
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地区三级联动</title>
<script src="./jquery.js"></script>
</head>
<body>
<h2>地区三级联动</h2>
省份：
<select name="" id="province" onchange="show_city()">
<option value="0">-请选择-</option>
</select>
城市：
<select name="" id="city" onchange="show_area()">
<option value="0">-请选择-</option>
</select>
地区：
<select name="" id="area">
<option value="0">-请选择-</option>
</select>
</body>
<!--
将省份的信息显示给下拉列表
①ajax去服务器把xml的地区信息都请求回来
②从中筛选"省份"信息并显示
③必须事件加载好了，再调用show_province
将对应的城市信息显示到下拉列表
· ①在省份中绑定内容改变事件
②获取对应城市的限制条件：city标签和cityID的前两位和省份id一致
③在追加节点之前必须先把旧的节点清空
将对应的区域信息显示到下拉列表
同上
-->
<script type="text/javascript">
var xmldom = null;//声明xml信息的全局变量，用于存储第一次请求回来的信息
function show_province(){
//①ajax去服务器把xml的地区信息都请求回来
$.get('./ChinaArea.xml',function(msg){
xmldom = msg;//将ajax第一次请求回来的xml信息存储到全局变量
//alert(msg);//ajax请求返回的是xml格式的文档对象
//对服务器返回的xml信息进行分析处理
/**
* 需要在 XMLDocument节点里获得province 元素节点
* province是XMLDocuemnt 的子节点
* 从父节点中获取内部的子节点$(父节点).find(子节点选择器)方法
*/
//console.log($(msg).find('province'));//此时已获取所有省份的信息
$(msg).find('province').each(function(){
//console.log($(this));//this分别依次代表每个province的dom对象
//获取省份的名称并显示给下拉列表
var nm = $(this).attr('province');//获取jquery对象的属性
var id = $(this).attr('provinceID');
// console.log(nm);
// 给select框"追加"省份名称
$('#province').append("<option value="+id+">"+nm+"</option>");
});
},'xml');
}
$(function(){//必须事件加载，所有的数据加载好，再调用show_province()函数
show_province();
});
function show_city(){
//①获取所选省份的id信息,省份下所有的#province option,获取选中的optiion,#province option:selected
var pid = $('#province option:selected').val();
//console.log(pid);//所选省份的id
var two_pid = pid.substr(0,2);//只需截取前两位数即可
//console.log(two_pid);
/**获得所选省份的城市信息
* 分析xml文件可知，provinceID前两位对应cityID的前两位
* 以上得到的provinceID为6位数,只需截取前两位数
* 限制条件 ：city标签并且本身id 的前两位和省份id的前两位一致
*/
console.log($(xmldom).find('City[CityID^= '+two_pid+']'));//CityID的前两位=省份id的前两位
$('#city').empty();//追加之前先把旧的节点删除
$('#city').append("<option value='0'>-请选择-</option>");
//遍历城市信息，并且显示到页面上
$(xmldom).find('City[CityID^='+two_pid+']').each(function(){
//this代表每一个city元素节点的dom对象
var nm = $(this).attr('City');
var id = $(this).attr('CityID');
//console.log(nm);
//给select框"追加"城市信息,追加之前先清除
$('#city').append("<option value="+id+">"+nm+"</option>")
});
}
function show_area(){
//①获取所选城市的id信息，城市下所有的#city option,获取选中的#city option:selected
var cid = $('#city option:selected').val();
// console.log(cid);
var four_cid = cid.substr(0,4);//只需获取城市id的前四位
// console.log(four_cid);
$('#area').empty();
$('#area').append("<option value='0'>-请选择-</option>");
//console.log($(xmldom).find('Piecearea[PieceareaID^='+four_cid+']'));//县区的前四位=城市id的前四位
$(xmldom).find('Piecearea[PieceareaID^='+four_cid+']').each(function(){
var nm = $(this).attr('Piecearea');
var id = $(this).attr('PieceareaID');
$('#area').append("<option value='+id+'>"+nm+"</option>");
});
}
</script>
</html>
