Laravel下拉选择值无法即时传递至后端问题求助

问题根源 #

• 参数名不匹配：前端DataTable的AJAX请求中传递的参数是selected_label，但后端尝试获取的是survey_option，导致后端无法正确接收最新值。
• 未触发DataTable重载：下拉框选中值更新后仅修改了变量，但没有触发DataTable发起新的请求，后端拿到的始终是初始化时的旧值。

解决方案 #

1. 统一前后端参数名称，确保传递的参数与后端接收的字段一致；
2. 在下拉框的change事件中调用DataTable的ajax.reload()方法，强制触发数据重新加载，将最新选中值传递到后端。

修改后的代码示例 #

前端JS代码

var survey_option;

$(document).ready(function() {
    $('select[name=survey_option]').on('change', function() {
        survey_option = $(this).val();
        console.log(survey_option);
        // 触发DataTable重新加载，携带最新选中值
        datatable.ajax.reload();
    });
});

var datatable = $('#label-record-table').on('xhr.dt', function (e, settings, json, xhr) {
}).DataTable({
    ajax: {
        url: "xxxxxx",
        type: "POST",
        dataType: "JSON",
        data: function(d) {
            // 修正参数名，与后端接收的survey_option保持一致
            d.survey_option = survey_option;
        }
    },
    columns: [
        { data: "xxxx" } // 替换为实际字段名
    ]
});

后端代码（无需修改，保持原逻辑即可）

$selected_label = $request->survey_option;

内容的提问来源于stack exchange，提问作者RA.IBOY