Laravel 5.7页面重载后如何保留联动下拉框选中状态？

我来帮你搞定这个动态下拉框的状态保留问题！你已经成功处理了第一个下拉框，接下来只需要把Session里的reason_detail_id传递到前端，再在动态生成第二个下拉框选项时匹配这个值设置选中状态即可，具体步骤如下：

1. 在Blade模板中传递保存的选中值给前端 #

首先在Blade顶部取出Session中的两个关键值，再把reason_detail_id转换成JavaScript变量供前端使用：

<?php 
$reason_id = Session::get('reason_id');
$reason_detail_id = Session::get('reason_detail_id');
?>

在页面合适位置（比如底部脚本区）添加这段代码，将PHP变量传递给JS：

<script>
    // 存储Session中保存的详情选中ID
    const savedReasonDetailId = "{{ $reason_detail_id ?? '' }}";
    // 存储第一个下拉框已选中的ID
    const initialReasonId = "{{ $reason_id ?? '' }}";
</script>

2. 修改JavaScript代码，增加初始化与选中逻辑 #

我们把加载下拉框选项的逻辑封装成可复用的函数，既可以在下拉框切换时调用，也能在页面初始化时主动触发。同时在生成选项时，判断当前选项是否匹配保存的reason_detail_id，匹配则添加selected属性：

$(document).ready(function(){
    // 封装加载reason详情的函数，提升复用性
    function loadReasonDetails(reasonId) {
        if(reasonId){
            $.ajax({
                type:"GET",
                url:"{{url('get-reason-details')}}?reason_id="+reasonId,
                success:function(res){
                    if(res){
                        $("#reason_detail").empty();
                        $("#reason_detail").append('<option>Select Reason Detail</option>');
                        $.each(res,function(key,value){
                            // 判断当前选项是否为之前保存的选中值
                            const selectedAttr = (key === savedReasonDetailId) ? 'selected' : '';
                            $("#reason_detail").append(`<option value="${key}" ${selectedAttr}>${value}</option>`);
                        });
                    }else{
                        $("#reason_detail").empty();
                    }
                }
            });
        }else{
            $("#reason_detail").empty();
        }
    }

    // 第一个下拉框的切换事件监听
    $('#reason').change(function(){
        loadReasonDetails($(this).val());
    });

    // 页面初始化时：如果第一个下拉框已有选中值，主动加载对应详情并选中保存的选项
    if(initialReasonId) {
        loadReasonDetails(initialReasonId);
    }
});

3. 确认控制器的Session存储逻辑 #

你在set_session方法中已经正确保存了reason_detail_id，这部分无需修改：

Session::put('reason_detail_id',$data['reason_detail']);

逻辑说明 #

• 页面重载后，第一个下拉框通过Blade的@if判断已自动选中之前保存的reason_id
• 页面初始化时，我们主动调用loadReasonDetails函数，传入已选中的reason_id触发AJAX请求，加载对应的详情选项
• 在生成每个详情选项时，对比当前选项的key和Session中保存的reason_detail_id，匹配则添加selected属性，实现自动选中之前的选项

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