jQuery 省市区三级联动 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>省市区三级联动</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script type="text/javascript" src="./jquery-3.3.1.js"></script>
    </head>
    <body>
        <br />
        <select id="province" onchange="showCity()"><option value="0">--请选择--</option></select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select id="city" onchange="showPiece()"><option value="0">--请选择--</option></select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select id="piecearea"><option value="0">--请选择--</option></select>
    </body>
</html>
<script type="text/javascript">
    // 定义一个全局变量
    // 保存所获取的xml数据
    var xmldom = null;
    // 省份名称自动获取
    $(function(){
        // 通过ajax获取数据
        $.ajax({
            url:'ChinaArea.xml',
            type:'get',
            dataType:'xml',
            success:function(msg){
                // 此时，msg为XMLDocument对象
                // 将获取到的对象保存到全局变量里面，使其他方法可以使用
                xmldom = msg;
                // 获取所有省份对象，通过循环获得所有省份名称以及所对应ID
                // 从msg里边查询获得province元素节点对象
                var pros = $(msg).find('province');
                // 遍历省份信息列表
                pros.each(function(k,v){
                    var num = $(this).attr('province');
                    var proId = $(this).attr('provinceID');
                    // 获取省份下拉框,后追加省份名称和ID,该ID追加与value中
                    $('#province').append("<option value='"+proId+"''>"+num+"</option>");
                });
            }
        });
    });
    // 选中省份名称后调用该方法
    function showCity(){

        // 初始化
        $('#city').empty();
        $('#city').append('<option value="0">--请选择--</option>');
        $('#piecearea').empty();
        $('#piecearea').append('<option value="0">--请选择--</option>');

        // 获取选中省份provinceID值,并赋值给pid,再次在XML中查找provinceID=pid的        
        var pid = $('#province option:selected').val();

        var xml_province = $(xmldom).find('province[provinceID='+pid+']');

        var citys = xml_province.find('City');
        
        citys.each(function(k,v){
            var cityName = $(this).attr('City');
            var cityId = $(this).attr('CityID');
            $('#city').append("<option value='"+cityId+"'>"+cityName+"</option>");

        });
    }
    function showPiece(){

        $('#piecearea').empty();
        $('#piecearea').append('<option value="0">--请选择--</option>');

        // 获得选中城市CityID，并赋值给pid,再次在XML中查找CityID=pid的 
        var pid = $('#city option:selected').val();

        // find() 可查询隔代内容  mxldom 与 City 中间有province
        // **************注意大小写************************
        var xml_citys = $(xmldom).find('City[CityID='+pid+']');
        var areas = xml_citys.find('Piecearea');

        areas.each(function(k,v){
            var pieceName = $(this).attr('Piecearea');
            var pieceId = $(this).attr('PieceareaID');
            $('#piecearea').append("<option value='"+pieceId+"'>"+pieceName+"</option>");
        });
    }
</script>
 

 

posted @ 2018-06-21 10:58  孤无涯  阅读(306)  评论(0)    收藏  举报