jquery与ajax实现三级联动下拉框

<script type="text/javascript">
    $(function () {
        $.getJSON('1.json',function (data) {
            var option = '<option value="">选择 省</option>';
            $.each(data,function (i) {
                option  +='<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $("#pro").html(option);
        });

        $('#pro').change(function(){
            $.getJSON('2.json',function (data) {
                var option = '<option value="">选择 市</option>';
                $.each(data,function (i) {
                    if(data[i].proId ==$("#pro").val){
                        option  +='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                });
                $("#city").html(option);
            });
        });

        $('#city').change(function(){
            $.getJSON('3.json',function(data){
                let option = '<option value="">选择 县</option>';
                $.each(data,function(i){
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                    }
                });
                $('#area').html(option);
            });
        });
        
    })
</script>