<!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" >
<option value="0">-请选择-</option>
</select>
城市：
<select name="" id="city">
<option value="0">-请选择-</option>
</select>
地区：
<select name="" id="area">
<option value="0">-请选择-</option>
</select>
</body>
<!--
将省份的信息显示给下拉列表
①ajax去服务器把xml的地区信息都请求回来
②从中筛选"省份"信息并显示
-->
<script type="text/javascript">
function show_province(){
//①ajax去服务器把xml的地区信息都请求回来
$.get(‘./ChinaArea.xml‘,function(msg){
//alert(msg);//ajax请求返回的是xml格式的文档对象
//对服务器返回的xml信息进行分析处理
/**
* 需要在 XMLDocument节点里获得province 元素节点
* province是XMLDocuemnt 的子节点
* 从父节点中获取内部的子节点$(父节点).find(子节点选择器)方法
*/
//console.log($(msg).find(‘province‘));//此时已获取所有省份的信息
$(msg).find(‘province‘).each(function(k,v){
//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();
});
</script>
</html>
时间： 2024-10-31 20:35:31