Ajax+JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3/jquery.min.js"></script>
    <script>
    //首先是通过ajax获取文件
    var nuldom;
    function  showpro() {
        $.ajax({
            url:'ChinaArea.xml',
            dataTypes:'xml',
            success:function(msg){
                nuldom=msg;
             $(msg).find('province').each(function (k,v) {
                 var nm=$(this).attr('province');
                 var id=$(this).attr('provinceID')
                 $('#shengfen').append("<option value='"+id+"'>"+nm+"</option>")
             });

            }
        })
    }
     $(function () {
    showpro();
      })

//获取城市
        function  showcity() {
           var pid=$('#shengfen option:selected').val();
             $('#chengshi').empty();
           var sel= $(nuldom).find("[provinceID="+pid+"]");

                    sel.find('City').each(function () {
                        var nm1=$(this).attr('City');
                        var id=$(this).attr('CityID');
                        $('#chengshi').append("<option value='"+id+"'>"+nm1+"</option>");
                    }) ;
        }

        //区域选项
        function showarea() {
           var pid=$('#chengshi option:selected').val();
            $('#quyu').empty();
               var sel= $(nuldom).find("[CityID="+pid+"]");
            sel.find('Piecearea').each(function () {
                var nm2=$(this).attr('Piecearea');
                var id=$(this).attr('PieceareaID');
                $('#quyu').append("<option value='"+id+"'>"+nm2+"</option>");
            })

        }
    </script>
</head>
<body>
<h1>三级联动</h1>
省份：<select id="shengfen" onchange="showcity()">
      <option>--请选择省份--</option>
      </select>
城市：<select id="chengshi" onchange="showarea()">
        <option>--请选择城市--</option>
      </select>
区域：<select id="quyu" onchange="showarea()">
      <option>--请选择区域--</option>
      </select>
</body>
</html>