jquery读取xml文件实现省市县三级联动 -

mywebcode

浏览: 998293 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

jquery读取xml文件实现省市县三级联动

jsp页面代码：（City.xml文件）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!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.js"></script>
    <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>

效果图：