联动动态选择菜单问题：选中division后district二级菜单无法获取数据

问题排查与修复方案 #

你代码里存在3处核心逻辑不匹配的问题，按以下步骤修改即可：

1. 路由与AJAX请求参数不匹配

你当前路由定义了路径参数{id}，但AJAX请求是把division id放在查询参数myID里传递，同时AJAX的url没有替换{id}占位符，会导致请求路径错误。
修复方案（二选一即可，推荐第一种）：

方案1：移除路由路径参数（更符合你当前的传参逻辑）

• 修改路由：

// 移除{id}占位符
Route::get('/getDistrict', 'AddressController@getDistrict');

• 修改AJAX请求url：

$.ajax({
    // 去掉url里的{id}
    url: '/getDistrict',
    type: 'GET',
    data: {
        myID: division
    },
    // 其余代码不变
})

方案2：使用路由路径参数传递id

• 修改AJAX请求逻辑，把id拼接到url里，移除data参数：

var division = $('#division').val();
$('#district').html('');
$.ajax({
    // 把division id拼到路径中
    url: '/getDistrict/' + division,
    type: 'GET',
    dataType: "json",
    // 其余代码不变
})

2. 控制器参数接收方式错误，查询逻辑可简化

如果用方案1的传参方式，控制器建议用Laravel官方的Request对象接收参数，同时不需要联表查询，直接查districts表即可：

// 顶部引入Request类
use Illuminate\Http\Request;

function getDistrict(Request $request)
{
    $id = $request->input('myID');
    // 直接查districts表即可，不需要联divisions表
    $res = DB::table('districts')
        ->where('divisions_id', $id)
        ->get();
    return response()->json($res);
}

如果用方案2的传参方式，控制器直接接收路径参数即可：

function getDistrict($id)
{
    $res = DB::table('districts')
        ->where('divisions_id', $id)
        ->get();
    return response()->json($res);
}

3. 可选：优化前端渲染逻辑

把district下拉框的启用逻辑放到循环外，避免重复操作DOM：

success: function(data) {
    $('#district')
        .html('<option value="">Select District</option>')
        .prop('disabled', false)
        .css('background', '#fff');
    $.each(data, function(key, district) {
        $('#district').append('<option value="' + district.id + '">' + district.name + '</option>');
    });
}

兜底排查步骤

如果修改后还是无数据，按以下步骤定位：

• 打开浏览器开发者工具的「网络」面板，触发division切换，查看AJAX请求的参数、响应状态：
  • 如果是404错误，检查路由是否存在拼写错误、是否有路由前缀
  • 如果响应是空数组，检查数据库districts表的外键字段名是否为divisions_id，对应division id下是否有绑定的district数据

内容的提问来源于stack exchange，提问作者Sayma Obaida