Laravel实现主菜单下拉框联动加载子菜单的方法求助

没问题，咱们一步步来搞定这个联动下拉框的需求，核心就是前端监听主菜单变化，发AJAX请求后端拿对应子菜单数据，再渲染到页面上。

第一步：修改主菜单的HTML结构 #

首先得给主菜单的每个选项加上value属性，把主菜单的ID传进去，这样后端才能知道用户选的是哪个主菜单。同时我们还要添加上子菜单的下拉框容器：

<div class="form-row">
    <div class="form-group col-md-4">
        <label for="inputState">Main Menu</label>
        <select id="inputState" name="mainmenu" class="form-control">
            <option selected>Choose...</option>
            @foreach ($mainmenus as $mainmenu)
                <!-- 这里把主菜单的Id作为option的value -->
                <option value="{{ $mainmenu->Id }}">{{ $mainmenu->Title }}</option>
            @endforeach
        </select>
    </div>
    <!-- 新增子菜单下拉框 -->
    <div class="form-group col-md-4">
        <label for="submenu">Sub Menu</label>
        <select id="submenu" name="submenu" class="form-control">
            <option selected>Choose Main Menu First...</option>
        </select>
    </div>
</div>

第二步：添加前端AJAX监听逻辑 #

用JavaScript监听主菜单的change事件，当用户选择不同的主菜单时，发送请求到后端获取对应的子菜单，再把数据渲染到子菜单里。这里用jQuery来写，Laravel项目一般默认引入了jQuery：

<script>
$(document).ready(function() {
    // 监听主菜单的选择变化
    $('#inputState').on('change', function() {
        const mainMenuId = $(this).val();

        // 如果用户选了"Choose..."，就重置子菜单
        if (!mainMenuId) {
            $('#submenu').html('<option selected>Choose Main Menu First...</option>');
            return;
        }

        // 发送AJAX请求到后端接口
        $.ajax({
            url: '{{ route("get.submenus") }}', // 后面要定义这个路由
            type: 'GET',
            data: { main_menu_id: mainMenuId },
            success: function(submenus) {
                // 先清空子菜单，添加默认选项
                let submenuOptions = '<option selected>Choose...</option>';
                
                // 遍历返回的子菜单数据，拼接option标签
                submenus.forEach(submenu => {
                    // 这里假设子菜单的显示字段是Title，根据你的实际表结构调整
                    submenuOptions += `<option value="${submenu.Id}">${submenu.Title}</option>`;
                });

                // 更新子菜单的内容
                $('#submenu').html(submenuOptions);
            },
            error: function() {
                // 请求出错时的提示
                $('#submenu').html('<option selected>Error loading submenus...</option>');
            }
        });
    });
});
</script>

第三步：定义后端路由和控制器方法 #

首先在routes/web.php里添加一个路由，用来处理AJAX请求：

// 记得替换成你的控制器名称，比如MenuController
Route::get('/get-submenus', [MenuController::class, 'getSubmenus'])->name('get.submenus');

然后在对应的控制器里添加getSubmenus方法，用来查询子菜单数据并返回JSON：

use Illuminate\Http\Request;

public function getSubmenus(Request $request)
{
    // 验证传入的主菜单ID是否合法
    $request->validate([
        'main_menu_id' => 'required|integer',
    ]);

    // 用你提供的查询语句获取子菜单数据
    $submenus = DB::connection("mysql2")
        ->table('applicationsubmenu')
        ->join('applicationmenu', 'applicationmenu.Id', '=', 'applicationsubmenu.ApplicationMenuId')
        ->select('applicationsubmenu.*')
        ->where('applicationmenu.MainMenuId', '=', $request->main_menu_id)
        ->get();

    // 返回JSON格式的子菜单数据
    return response()->json($submenus);
}

一些注意事项 #

• 确保你的子菜单表applicationsubmenu里有Title字段用来显示，如果字段名不一样，记得修改前端拼接option时的字段名；
• 检查数据库连接mysql2是否在config/database.php里正确配置；
• 如果你的项目禁用了jQuery，可以改用原生JavaScript的fetch API来实现AJAX请求，逻辑是一样的。

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