动态填充二级联动下拉框如何在jQuery中正确使用old()函数保留错误前选中值

问题根源 #

old()是Laravel提供的Blade服务端渲染语法，仅会在Blade模板文件被服务端解析时执行替换。你将它写在jQuery动态生成HTML的客户端JS代码中，服务端不会解析这段JS字符串里的Blade标签，所以old判断完全不生效。

正确实现步骤 #

1. 在Blade模板中提前把old值暴露给JS
   在你的联动脚本上方，先定义全局JS变量存储old的供应商ID，代码放在Blade文件里即可：

<script>
// 存储服务端返回的old值，空值兜底
const oldFournisseur = "{{ old('fournisseur', '') }}";
</script>

2. 修改联动脚本的option生成逻辑
   直接用上面定义的oldFournisseur变量做选中判断：

$('#first-choice').change(function(){
    if( $('#first-choice :selected').length > 0){
        var selectednumbers = [];
        $('#first-choice :selected').each(function(i, selected) {
            selectednumbers[i] = $(selected).val();
        });
        $.ajax({
            url: '{{ url('get_fournisseurs') }}',
            method:'GET',
            data: {selectednumbers: selectednumbers },
            dataType: 'json',
            success: function(dataResult){
                var resultData = dataResult.data;
                $('#second-choice').empty();
                $.each(resultData, function(i,row){
                    // 直接用JS变量做选中判断
                    $('#second-choice').append(`<option value="${row.id}" ${oldFournisseur == row.id ? 'selected' : ''}>
                        ${row.id+'-'+row.nomSociete}
                    </option>`);
                })
            }
        });
    }
});

3. 页面加载时主动触发联动加载第二个下拉框选项
   表单提交出错返回页面时，第一个下拉框已经保留了选中值，需要主动触发change事件加载第二个下拉框的选项，才能让old选中值生效：

$(function(){
    // 页面加载完成后，如果第一个下拉框有值，主动触发联动
    if($('#first-choice').val()){
        $('#first-choice').trigger('change');
    }
});

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