jquery获取后台数据进行四级联动,一二级为省市下拉框,三级为区表格且带复选框,四级为街道表格 具体代码

以下是一个示例代码，使用了jQuery和Bootstrap框架，获取后台数据进行四级联动：

HTML代码：

<div class="form-group">
    <label for="province">省份</label>
    <select class="form-control" id="province"></select>
</div>
<div class="form-group">
    <label for="city">城市</label>
    <select class="form-control" id="city"></select>
</div>
<div class="form-group">
    <label for="district">区县</label>
    <table class="table table-hover" id="district">
        <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <<th>编码</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="form-group">
    <label for="street">街道</label>
    <table class="table table-hover" id="street">
        <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>编码</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

JavaScript代码：

$(function() {
    // 获取省份列表
    $.getJSON('/api/provinces', function(data) {
        // 遍历省份列表，添加到下拉框中
        $.each(data, function(index, province) {
            $('#province').append('<option value="' + province.code + '">' + province.name + '</option>');
        });
        // 触发省份下拉框的change事件
        $('#province').change();
    });

    // 省份下拉框的change事件
    $('#province').on('change', function() {
        // 获取选中的省份编码
        var provinceCode = $(this).val();
        // 清空城市下拉框的选项
        $('#city').empty();
        // 获取城市列表
        $.getJSON('/api/cities/' + provinceCode, function(data) {
            // 遍历城市列表，添加到下拉框中
            $.each(data, function(index, city) {
                $('#city').append('<option value="' + city.code + '">' + city.name + '</option>');
            });
            // 触发城市下拉框的change事件
            $('#city').change();
        });
    });

    // 城市下拉框的change事件
    $('#city').on('change', function() {
        // 获取选中的城市编码
        var cityCode = $(this).val();
        // 清空区县表格的行
        $('#district tbody').empty();
        // 获取区县列表
        $.getJSON('/api/districts/' + cityCode, function(data) {
            // 遍历区县列表，添加到表格中
            $.each(data, function(index, district) {
                $('#district tbody').append('<tr><td><input type="checkbox" value="' + district.code + '"></td><td>' + district.name + '</td><td>' + district.code + '</td></tr>');
            });
            // 触发区县表格的change事件
            $('#district input[type="checkbox"]').change();
        });
    });

    // 区县表格的change事件
    $('#district input[type="checkbox"]').on('change', function() {
        // 获取选中的区县编码
        var districtCodes = [];
        $('#district input[type="checkbox"]:checked').each(function() {
            districtCodes.push($(this).val());
        });
        // 清空街道表格的行
        $('#street tbody').empty();
        // 如果没有选中任何区县，则不需要查询街道列表
        if (districtCodes.length == 0) {
            return;
        }
        // 获取街道列表
        $.getJSON('/api/streets/' + districtCodes.join(','), function(data) {
            // 遍历街道列表，添加到表格中
            $.each(data, function(index, street) {
                $('#street tbody').append('<tr><td><input type="checkbox" value="' + street.code + '"></td><td>' + street.name + '</td><td>' + street.code + '</td></tr>');
            });
        });
    });
});

说明：

- 当省份下拉框的选项改变时，发送AJAX请求获取对应的城市列表，然后将城市列表添加到城市下拉框中，并触发城市下拉框的change事件。
- 当城市下拉框的选项改变时，发送AJAX请求获取对应的区县列表，然后将区县列表添加到区县表格中，并触发区县表格的change事件。
- 当区县表格中的复选框选项改变时，发送AJAX请求获取对应的街道列表，然后将街道列表添加到街道表格中。