jq四级联动

前端代码:

<div class="tc">
    <div class="aboutBannerBox"></div>
    <div class="aboutCont">

        <div id="address">
            <select id="province" style="min-width: 120px;">
                <option value="">请选择省份</option>
            </select >

        </div>

    </div>
</div>

<script>
    $(function(){

        province();

        //获取到市
        $('#province').change(function(){
            var url = '/order/get_address';
            var code = $(this).val();

            $.ajax({
                url:url,
                type:'post',
                data:{code:code,country:156},
                dataType:'json',
                success:function(data){

                    var city =  '<select id="city" style="min-width: 120px;"> <lect>';
                    if($('#city').length < 1){
                        $('#address').append(city);
                    }
                    var content = '<option>请选择市</option>';

                    var data = data.data;
                    for (var i in data) {
                        content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                    }
                    $('#city').html(content);

                    area();
                }
            })
        });



        //获取到县/区
        function area(){
            $('#city').change(function(){
                var url = '/order/get_address';
                var code = $(this).val();

                $.ajax({
                    url:url,
                    type:'post',
                    data:{code:code,country:156},
                    dataType:'json',
                    success:function(data){

                        var area =  '<select id="area" style="min-width: 120px;"> <lect>';
                        if($('#area').length < 1){
                            $('#address').append(area);
                        }

                        var content = '<option>县/区</option>';
                        var data = data.data;
                        for (var i in data) {
                            content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                        }

                        $('#area').html(content);
                        street();
                    }

                })
            });
        }

        function street(){
            //获取到街道
            $('#area').change(function(){

                var url = '/order/get_address';
                var code = $(this).val();

                $.ajax({
                    url:url,
                    type:'post',
                    data:{code:code,country:156},
                    dataType:'json',
                    success:function(data){

                        var street =  '<select id="street" style="min-width: 120px;"> <lect>';
                        if($('#street').length < 1){
                            $('#address').append(street);
                        }

                        var content = '<option>街道</option>';
                        var data = data.data;
                        for (var i in data) {
                            content += '<option value='+data[i].code+'>'+data[i].name+'</option>';
                        }
                        $('#street').html(content);
                    }
                })
            })
        }
    });



    //获取到省份
    function province(){
        var url = '/order/get_address';
        $.ajax({
            url:url,
            type:'post',
            data:{code:0,country:156},
            dataType:'json',
            success:function(data){
                var content = '<option>请选择省份</option>';
                var data = data.data;
                for (var i=0;i<data.length;i++) {
                    content += '<option value='+data[i].code+'>'+data[i].name+'</option>'
                }
                $('#province').html(content);
            }
        })
    }
</script>