三级联动，前后端分离

html

<div class="form-group col-lg-12">
    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>农场:</label>
    <span class="input-group input-group-option">
        <select name="farm_id" id="farm_id" class="form-control" style="position: relative; left:-4px;z-index: 1;border-radius:3px;" aria-describedby="object">
        </select>
    </span>
</div>

<div class="form-group col-lg-12">
    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>区域:</label>
    <span class="input-group input-group-option">
        <select name="area_id" id="area_id" class="form-control" style="position: relative; left:-4px;z-index: 1;border-radius:3px;" aria-describedby="object">
        </select>
    </span>
</div>

<div class="form-group col-lg-12">
    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>区域块:</label>
    <span class="input-group input-group-option">
        <select name="child_id" id="child_id" class="form-control" style="position: relative; left:-4px;z-index: 1;border-radius:3px;" aria-describedby="object">
        </select>
    </span>
</div>

<div class="form-group col-lg-12">
    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>菜地:</label>
    <span class="input-group input-group-option">
        <select name="field_id" id="field_id" class="form-control" style="position: relative; left:-4px;z-index: 1;border-radius:3px;" aria-describedby="object">
        </select>
    </span>
</div>

js

ajax_get_farm();

$('#farm_id').on('change',function(){
    let farm_id = $(this).val();
    // 获取区域数据
    ajax_get_area(farm_id,true);
});

$('#area_id').on('change',function(){
    let farm_area_id = $(this).val();
    // 获取区域数据
    ajax_get_child(farm_area_id,true);
});

$('#child_id').on('change',function(){
    let farm_area_child_id = $(this).val();
    // 获取区域数据
    ajax_get_field(farm_area_child_id,true);
});


function ajax_get_farm(no_init) {
    // 获取农场数据
    $.ajax({
        type:'POST',
        url:'ajax_get_farm',
        data: {},
        dataType:'json',
        success:function(data){
            if(data.errno == 0){
                let jsonData = data.data;
                let farm_option_str = "<option value='0'>--请选择--</option>";
                for(let p in jsonData){
                    farm_option_str += "<option value='"+jsonData[p].id+"'>"+jsonData[p].name+"</option>"
                }
                $("#farm_id").html(farm_option_str);
                // 重置区域，区域块，菜地
                reset_area();
                reset_child();
                reset_field();

                if (!no_init) {
                    // 初始化
                    let farm_id = "{$farm_area_child_field_info['farm_id']}";
                    if (farm_id) {
                        $("#farm_id").val(farm_id);
                        ajax_get_area(farm_id);
                    }
                }
            }else{
                alert(data.errdesc);
                return false;
            }
        }
    });
}


function ajax_get_area(farm_id,no_init) {
    // 获取农场数据
    $.ajax({
        type:'POST',
        url:'ajax_get_area',
        data: {farm_id:farm_id},
        dataType:'json',
        success:function(data){
            if(data.errno == 0){
                let jsonData = data.data;
                let option_str = "<option value='0'>--请选择--</option>";
                for(let p in jsonData){
                    option_str += "<option value='"+jsonData[p].id+"'>"+jsonData[p].name+"</option>"
                }
                $("#area_id").html(option_str);
                // 重置区域块，菜地
                reset_child();
                reset_field();

                if (!no_init) {
                    // 初始化
                    let farm_area_id = "{$farm_area_child_field_info['farm_area_id']}";
                    if (farm_area_id) {
                        $("#area_id").val(farm_area_id);
                        ajax_get_child(farm_area_id);
                    }
                }
            }else{
                alert(data.errdesc);
                return false;
            }
        }
    });
}

function ajax_get_child(farm_area_id,no_init) {
    // 获取农场数据
    $.ajax({
        type:'POST',
        url:'ajax_get_child',
        data: {farm_area_id:farm_area_id},
        dataType:'json',
        success:function(data){
            if(data.errno == 0){
                let jsonData = data.data;
                let option_str = "<option value='0'>--请选择--</option>";
                for(let p in jsonData){
                    option_str += "<option value='"+jsonData[p].id+"'>"+jsonData[p].name+"</option>"
                }
                $("#child_id").html(option_str);
                // 重置区域块，菜地
                reset_field();
                if (!no_init) {
                    // 初始化
                    let farm_area_child_id = "{$farm_area_child_field_info['farm_area_child_id']}";
                    if (farm_area_child_id) {
                        $("#child_id").val(farm_area_child_id);
                        ajax_get_field(farm_area_child_id);
                    }
                }
            }else{
                alert(data.errdesc);
                return false;
            }
        }
    });
}

function ajax_get_field(farm_area_child_id,no_init) {
    // 获取农场数据
    $.ajax({
        type:'POST',
        url:'ajax_get_field',
        data: {farm_area_child_id:farm_area_child_id},
        dataType:'json',
        success:function(data){
            if(data.errno == 0){
                let jsonData = data.data;
                let option_str = "<option value='0'>--请选择--</option>";
                for(let p in jsonData){
                    if (jsonData[p].status == 1) {
                        jsonData[p].name += "【正常空地】";
                    }
                    if (jsonData[p].status == 2) {
                        jsonData[p].name += "【已使用】";
                    }
                    if (jsonData[p].status == 3) {
                        jsonData[p].name += "【地不好】";
                    }
                    option_str += "<option value='"+jsonData[p].id+"'>"+jsonData[p].name+"</option>"
                }
                $("#field_id").html(option_str);
                if (!no_init) {
                    // 初始化
                    let farm_area_child_field_id = "{$farm_area_child_field_info['id']}";
                    if (farm_area_child_field_id) {
                        $("#field_id").val(farm_area_child_field_id);
                    }
                }
            }else{
                alert(data.errdesc);
                return false;
            }
        }
    });
}

function reset_area() {
    let option_str = "<option value='0'>--请选择--</option>";
    $("#area_id").html(option_str);
}

function reset_child() {
    let option_str = "<option value='0'>--请选择--</option>";
    $("#child_id").html(option_str);
}

function reset_field() {
    let option_str = "<option value='0'>--请选择--</option>";
    $("#field_id").html(option_str);
}

php

/**
 * ajax 获取农场
 */
public function ajax_get_farm() {
    vendor('Func.Json');
    $json = new Json();

    $farm = M('farm');
    $farm_list = $farm->where(['status'=>1])->field('id,name')->order('id asc')->select();
    $json->setAttr('data',$farm_list);
    $json->setErr(0, '获取成功');
    $json->Send();
}


/**
 * ajax 获取区域
 */
public function ajax_get_area() {
    vendor('Func.Json');
    $json = new Json();
    $farm_id = $_POST['farm_id'];

    $farm_area = M('farm_area');
    $data_list = $farm_area->where(['farm_id'=>$farm_id,'status'=>1])->field('id,name')->order('id asc')->select();
    $json->setAttr('data',$data_list);
    $json->setErr(0, '获取成功');
    $json->Send();
}

/**
 * ajax 获取区域块
 */
public function ajax_get_child() {
    vendor('Func.Json');
    $json = new Json();
    $farm_area_id = $_POST['farm_area_id'];

    $farm_area_child = M('farm_area_child');
    $data_list = $farm_area_child->where(['farm_area_id'=>$farm_area_id,'status'=>1])->field('id,name')->order('id asc')->select();
    $json->setAttr('data',$data_list);
    $json->setErr(0, '获取成功');
    $json->Send();
}

/**
 * ajax 获取菜地
 */
public function ajax_get_field() {
    vendor('Func.Json');
    $json = new Json();
    $farm_area_child_id = $_POST['farm_area_child_id'];

    $farm_area_child_field = M('farm_area_child_field');
    $data_list = $farm_area_child_field->where(['farm_area_child_id'=>$farm_area_child_id,'status'=>['neq',0]])->field('id,name,status')->order('id asc')->select();
    $json->setAttr('data',$data_list);
    $json->setErr(0, '获取成功');
    $json->Send();
}