页面代码如下：
<!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实现三级联动步骤详解的详细内容。