【笔记】Ajax+ChinaArea.xml实现三级联动

最新推荐文章于 2024-05-05 19:51:46 发布

朱赤墨黑

最新推荐文章于 2024-05-05 19:51:46 发布

阅读量1k

点赞数 1

分类专栏： ajax 文章标签： ajax ChinaArea

本文链接：https://blog.csdn.net/jul_11th/article/details/54178281

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

源码内含ChinaArea.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 'index.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">
    <script type="text/javascript" src="jquery.js"></script>
  </head>
  <body>
    <select id="province">
        <option value="0">==请选择省份==</option>
    </select>
    <select id="city">
        <option value="0">==请选择城市==</option>
    </select>
    <select id="area">
        <option value="0">==请选择县(区)==</option>
    </select>
  </body>
  <script type="text/javascript">
        var xmldom=null;
        $.get('ChinaArea.xml',null,function (msg){
            xmldom=msg;
            $(msg).find('province').each(function(k,v){
                var nm=$(this).attr('province');
                var id=$(this).attr('provinceID');
                $('#province').append("<option value='"+id+"'>"+nm+"</option>");
            });
        },'xml');

        $('#province').change(function(){
            var pid=$('#province option:selected').val();
            var towPid=pid.substr(0,2);
            $('#city option:not(:first)').remove();
            $(xmldom).find('City[CityID^='+towPid+']').each(function(k,v){
                var nm=$(this).attr('City');
                var id=$(this).attr('CityID');
                $('#city').append("<option value='"+id+"'>"+nm+"</option>");
            });
        });
        $('#city').change(function(){
            var cid=$('#city option:selected').val();
            var fourCid=cid.substr(0,4);
            $('#area option:not(:first)').remove();
            $(xmldom).find('Piecearea[PieceareaID^='+fourCid+']').each(function(k,v){
                var nm=$(this).attr('Piecearea');
                var id=$(this).attr('PieceareaID');
                $('#area').append("<option value='"+id+"'>"+nm+"</option>");
            });
        });
    </script>
</html>