Laravel中如何获取下拉框选中值ID并联动另一下拉框？

嘿，我来帮你搞定这个下拉框联动的问题！你现在的代码是页面加载时一次性获取所有数据，但没法实现“选Class后动态更新Section”的效果，咱们需要结合后端路由+AJAX来解决，一步步来：

第一步：修正后端逻辑并添加AJAX接口 #

首先，你的原代码里有个小拼写错误（classses应该是classes），而且直接把整个班级集合传给where条件是不对的。咱们调整控制器代码：

控制器代码 #

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class YourRegisterController extends Controller
{
    // 显示注册表单
    public function showRegisterForm()
    {
        // 获取所有班级列表，传给前端第一个下拉框
        $classes = DB::table('classes')->get();
        return view('register', compact('classes'));
    }

    // 处理AJAX请求，返回对应班级的Section数据
    public function getSectionsByClass(Request $request)
    {
        // 获取前端传过来的class_id
        $classId = $request->input('class_id');
        // 查询对应班级的所有Section
        $sections = DB::table('sections')->where('class_id', $classId)->get();
        // 以JSON格式返回数据
        return response()->json($sections);
    }
}

添加路由（web.php） #

给AJAX请求加个路由：

// 显示注册页面
Route::get('/register', [YourRegisterController::class, 'showRegisterForm']);
// AJAX获取Section的接口
Route::get('/sections/get', [YourRegisterController::class, 'getSectionsByClass'])->name('sections.get');

第二步：调整前端HTML和添加JS逻辑 #

咱们给下拉框加ID方便JS操作，去掉原来的计数器逻辑（没必要用计数器设置默认选中，联动后自动处理），然后用AJAX监听Class下拉框的变化：

前端HTML代码 #

<div class="col-md-6">
    <select id="class-select" class="" name="class_id">
        <option value="">选择班级</option>
        @foreach($classes as $class)
            <option value="{{ $class->id }}">{{ $class->title }}</option>
        @endforeach
    </select>
</div>

<div class="col-md-6">
    <select id="section-select" name="section_id">
        <option value="">选择班级后加载Section</option>
        <!-- 这里的选项会通过AJAX动态生成 -->
    </select>
</div>

AJAX逻辑（用jQuery，假设页面已引入jQuery） #

在页面底部添加这段JS：

$(document).ready(function() {
    // 监听班级下拉框的变化事件
    $('#class-select').change(function() {
        const classId = $(this).val();
        const sectionSelect = $('#section-select');

        // 如果没选班级，清空Section下拉框
        if (!classId) {
            sectionSelect.html('<option value="">选择班级后加载Section</option>');
            return;
        }

        // 发送AJAX请求到后端接口
        $.ajax({
            url: '{{ route("sections.get") }}',
            type: 'GET',
            data: { class_id: classId },
            success: function(sections) {
                // 清空原有选项，保留默认提示
                sectionSelect.html('<option value="">选择Section</option>');
                // 循环添加新的Section选项
                sections.forEach(section => {
                    sectionSelect.append(`<option value="${section.id}">${section.title}</option>`);
                });
            },
            error: function() {
                alert('加载Section失败，请重试！');
            }
        });
    });

    // 可选：页面加载时如果有默认选中的班级，自动触发一次change事件
    // $('#class-select').trigger('change');
});

一些注意事项 #

• 确保你的sections表确实有class_id字段，并且和classes表的id关联正确；
• 如果不想用jQuery，也可以用原生JS的fetch API实现AJAX，逻辑是一样的；
• 原代码里的{$counterr++}}是语法错误，正确的Blade语法是{{ $counterr++ }}，不过咱们的方案里已经不需要这个计数器啦。

这样就能实现“选Class后自动加载对应Section”的效果了！

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