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">
 <div>
 <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>
 </div>
 </form>
 </body>
</html>

效果图如下：

希望本文所述对大家的jQuery程序设计有所帮助。