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

最新推荐文章于 2018-10-09 11:20:21 发布

kenhins

最新推荐文章于 2018-10-09 11:20:21 发布

阅读量2.5k

点赞数 1

分类专栏： Javascript 文章标签： xml

本文链接：https://blog.csdn.net/kenhins/article/details/20405065

版权

Javascript 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

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>

效果图：

kenhins

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jquery读取xml文件实现省市县三级联动

jsp页面代码：（City.xml文件）<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My
复制链接

扫一扫

专栏目录