这次给大家带来jquery+xml实现三级联动步骤详解，jquery+xml实现三级联动步骤详解的注意事项有哪些，下面就是实战案例，一起来看一下。
页面代码如下：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<base href="<%=basepath%>>
<title>my jsp 'city.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//省
$.ajax({url:xml/city.xml,
success:function(xml){
$(xml).find(province).each(function(){
var t = $(this).attr(name);//this->
$(#dropprovince).append(<option>+t+</option>);
});
}
});
//市
$(#dropprovince).change(function(){
$(#scity>option).remove();
$(#sarea>option).remove();
var pname = $(#dropprovince).val();
$.ajax({url:xml/city.xml,
success:function(xml){
///查找<province>下的所有第一级子元素(即城市)
$(xml).find(province[name='+pname+']>city).each(function(){
var city = $(this).attr(name);//this->
$(#scity).append(<option>+city+</option>);
});
///查找<city>下的所有第一级子元素(即区域)
var cname = $(#scity).val();
$(xml).find(city[name='+cname+']>area).each(function(){
var area = $(this).attr(name);//this->
$(#sarea).append(<option>+area+</option>);
});
}
});
});
//区
$(#scity).change(function(){
$(#sarea>option).remove();
var cname = $(#scity).val();
$.ajax({url:xml/city.xml,
success:function(xml){
///查找<city>下的所有第一级子元素(即区域)
$(xml).find(city[name='+cname+']>area).each(function(){
var area = $(this).attr(name);//this->
$(#sarea).append(<option>+area+</option>);
});
}
});
});
});
</script>
</head>
<body>
<form id="form1">
<p>
<select id="dropprovince" style="width:100px;">
<option>请选择</option>
</select>
<select id="scity" style="width:100px;">
<option>请选择相应市</option>
</select>
<select id="sarea" style="width:100px;">
<option>请选择相应区</option>
</select>
</p>
</form>
</body>
</html>
效果图如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery插件tocify动态节点实现目录菜单
jquery解析xml文件与动态增加js文件如何实现
以上就是jquery+xml实现三级联动步骤详解的详细内容。