如何将Ajax传递的多选数组值存入Google Apps Script表格

问题根源 #

当使用<select multiple>结合Bootstrap Multiselect时，表单序列化后会生成多个同名参数（name="facultyInterest"），但Google Apps Script的e.parameter对象默认只会提取第一个同名参数的值，而非全部选中项。你之前尝试的全局join会把所有表单字段值合并，逻辑有误，导致问题未解决。

解决方案：前端单独处理多选字段 #

修改Ajax提交前的数据处理逻辑，单独提取多选框的所有选中值，拼接成逗号分隔的字符串后再提交：

修改后的JavaScript代码（submitHandler部分） #

submitHandler: function(form){
    // 初始化表单数据对象
    var formData = {};

    // 遍历序列化后的普通字段，排除多选字段
    $('.nus-event-form').serializeArray().forEach(function(item) {
        if (item.name !== 'facultyInterest') {
            formData[item.name] = item.value;
        }
    });

    // 获取多选框所有选中值，拼接为逗号分隔的字符串
    var selectedFaculties = $('#facultyInterest').val();
    formData['facultyInterest'] = selectedFaculties ? selectedFaculties.join(', ') : '';

    $.ajax({
        url: 'https://script.google.com/macros/s/key/exec',
        data: formData,
        type: 'POST',
        success: function(response){
            $("#submitBtn").css("display", "none");
            $("#loadingBtn").css("display", "block");
            var json = JSON.stringify(response.result);
            setTimeout( () => {
                $("#submitBtn").css("display", "block");
                $("#loadingBtn").css("display", "none");
                if(json.slice(1, -1) == "success"){
                    $("#nus_event_form_alerts").html("<div class='alert alert-success'>Terima kasih! Formulir Anda sudah diterima dan akan di follow up dalam waktu 24 jam.</div>");
                    $(".nus-event-form")[0].reset();
                    // 重置multiselect组件状态
                    $('#facultyInterest').multiselect('refresh');
                }else{
                    $("#nus_event_form_alerts").html("<div class='alert alert-danger'>Formulir gagal diterima!</div>")
                }
            }, 5000);
        }
    });
}

额外优化点 #

1. 修正HTML的select标签：原代码中select标签重复写了两次class属性，合并为一个规范写法：

<select name="facultyInterest" id="facultyInterest" class="facultyInterest multiselect" multiple="multiple">

2. 同步Multiselect组件状态：表单重置后添加$('#facultyInterest').multiselect('refresh');，确保组件显示与实际表单值一致。

为什么之前的方法无效？ #

你之前的代码$('.nus-event-form').serializeArray().map((e)=>{return e.value;}).join(', ')会把所有表单字段的值（包括未来可能添加的其他字段）合并成一个字符串，而非仅处理多选字段，导致Google Sheets收到的是混乱的拼接值，而非单独的多选项字符串。

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