jquery讀取xml文件實現省市縣三級聯動的方法

2019-11-20 12:23:23

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

效果圖如下：