Google表单联动下拉菜单实现求助（附初始代码）

一、条件联动下拉框实现（基于提交触发更新） #

Google表单原生不支持前端实时联动，需通过服务端脚本+触发器实现提交后更新第二个下拉框：

1. 完整脚本代码 #

function updateDropdown() {
  // 获取目标表单
  var form = FormApp.getActiveForm();
  // 下拉框索引（根据实际表单结构调整）
  const firstDropdownIndex = 0;
  const secondDropdownIndex = 1;
  const firstDropdownItem = form.getItems()[firstDropdownIndex];
  const secondDropdownItem = form.getItems()[secondDropdownIndex];

  // 读取Sheet中的部门-项目数据
  const sheetId = '103-vF2U3OEG6_k25IU8bn0oODXxS3XiyuJxokXfqJMU';
  const sheetName = 'Sheet1';
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
  const data = sheet.getRange('A1:B91').getValues();

  // 提取唯一部门选项并更新第一个下拉框
  const firstDropdownChoices = [...new Set(data.map(row => row[0]))];
  const firstDropdown = firstDropdownItem.asListItem();
  firstDropdown.setChoiceValues(firstDropdownChoices);

  // 构建部门-项目映射（自动去重）
  const deptProjectMap = {};
  data.forEach(row => {
    const dept = row[0];
    const project = row[1];
    if (!deptProjectMap[dept]) deptProjectMap[dept] = new Set();
    deptProjectMap[dept].add(project);
  });
  // 将映射存入脚本属性，供触发事件调用
  PropertiesService.getScriptProperties().setProperty('deptProjectMap', JSON.stringify(deptProjectMap));
}

// 创建表单提交触发器
function setupTrigger() {
  const form = FormApp.getActiveForm();
  ScriptApp.newTrigger('onDepartmentSelected')
    .forForm(form)
    .onFormSubmit()
    .create();
}

// 部门选择后的联动处理逻辑
function onDepartmentSelected(e) {
  const form = FormApp.getActiveForm();
  const secondDropdown = form.getItems()[1].asListItem();
  
  // 获取用户选中的部门
  const selectedDept = e.response.getItemResponses()[0].getResponse();
  // 读取预存的部门-项目映射
  const deptProjectMap = JSON.parse(PropertiesService.getScriptProperties().getProperty('deptProjectMap'));
  // 获取对应项目列表（空数组兜底）
  const projectChoices = deptProjectMap[selectedDept] ? Array.from(deptProjectMap[selectedDept]) : [];
  
  // 更新第二个下拉框的选项
  secondDropdown.setChoiceValues(projectChoices);
}

2. 操作步骤 #

• 先运行updateDropdown()：初始化第一个下拉框的部门选项，同时生成部门-项目映射并存储
• 再运行setupTrigger()：创建表单提交触发器，确保用户选择部门提交后，第二个下拉框自动更新为对应项目

二、章节跳转替代方案（更直观的交互） #

如果觉得提交后更新的流程不够流畅，可以采用部门选择后跳转至对应章节的方案，每个章节仅展示该部门的项目选项：

1. 完整脚本代码 #

function createDeptSections() {
  const form = FormApp.getActiveForm();
  // 清除现有章节（按需保留，若需保留其他问题可注释此行）
  form.getItems(FormApp.ItemType.PAGE_BREAK).forEach(item => form.deleteItem(item));

  // 读取Sheet数据
  const sheetId = '103-vF2U3OEG6_k25IU8bn0oODXxS3XiyuJxokXfqJMU';
  const sheetName = 'Sheet1';
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
  const data = sheet.getRange('A1:B91').getValues();

  // 构建部门-项目映射
  const deptProjectMap = {};
  data.forEach(row => {
    const dept = row[0];
    const project = row[1];
    if (!deptProjectMap[dept]) deptProjectMap[dept] = new Set();
    deptProjectMap[dept].add(project);
  });

  // 更新第一个部门下拉框，并配置跳转规则
  const firstDropdown = form.getItems()[0].asListItem();
  const deptChoices = Object.keys(deptProjectMap);
  const dropdownChoices = deptChoices.map(dept => {
    const choice = FormApp.createChoice(dept);
    // 为每个部门选项绑定对应章节的跳转
    const pageBreak = form.addPageBreakItem().setTitle(`请选择${dept}的项目`);
    // 在对应章节添加项目下拉框
    const projectDropdown = form.addListItem()
      .setTitle('项目')
      .setChoiceValues(Array.from(deptProjectMap[dept]));
    choice.setGoToPage(pageBreak);
    return choice;
  });
  firstDropdown.setChoiceValues(dropdownChoices);

  // 添加结束页面，并设置所有项目选项跳转至结束页
  const endPage = form.addPageBreakItem().setTitle('提交完成');
  form.getItems(FormApp.ItemType.LIST).forEach(item => {
    if (item.getTitle() === '项目') {
      const projectDropdown = item.asListItem();
      projectDropdown.setChoiceValues(
        projectDropdown.getChoices().map(choice => choice.setGoToPage(endPage))
      );
    }
  });
}

2. 效果说明 #

• 用户选择部门后，自动跳转到专属章节，仅能看到该部门的项目选项
• 选择项目后直接跳转至结束页面，完成提交流程，交互更流畅

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