基于Google Sheet-Web App Script实现多阶联动下拉菜单需求

一、数据结构准备 #

在Google Sheet中创建名为Data的工作表，按层级结构整理数据，示例结构如下（对应预期表格效果）：

确保每一行完整对应一条从一级到四级的层级链，空值留空即可（支持2级/3级/4级混合场景）。

二、后端Google Apps Script实现 #

打开Sheet的脚本编辑器，替换默认代码为以下内容：

// 加载HTML页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('多级联动下拉表单');
}

// 获取指定层级的下一级选项
function getLevelOptions(selectedValues) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  const data = sheet.getDataRange().getValues();
  const headers = data.shift();
  
  // 确定当前选中的层级索引
  let currentLevelIndex = 0;
  for (let i = 0; i < selectedValues.length; i++) {
    if (!selectedValues[i]) break;
    currentLevelIndex = i;
  }
  const nextLevelIndex = currentLevelIndex + 1;
  if (nextLevelIndex >= headers.length) return [];
  
  // 过滤符合选中条件的下一级选项并去重
  const options = new Set();
  data.forEach(row => {
    let match = true;
    for (let i = 0; i <= currentLevelIndex; i++) {
      if (row[i] !== selectedValues[i]) {
        match = false;
        break;
      }
    }
    if (match && row[nextLevelIndex]) {
      options.add(row[nextLevelIndex]);
    }
  });
  
  return Array.from(options).sort();
}

三、前端HTML页面实现 #

在脚本编辑器中创建名为Index的HTML文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .form-group {
        margin: 15px 0;
      }
      select {
        padding: 8px 12px;
        min-width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="form-group">
      <label>一级分类:</label>
      <select id="level1" onchange="updateNextLevel(1)"></select>
    </div>
    <div class="form-group">
      <label>二级分类:</label>
      <select id="level2" onchange="updateNextLevel(2)"></select>
    </div>
    <div class="form-group">
      <label>三级分类:</label>
      <select id="level3" onchange="updateNextLevel(3)"></select>
    </div>
    <div class="form-group">
      <label>四级选项:</label>
      <select id="level4"></select>
    </div>

    <script>
      // 页面加载时初始化一级选项
      window.onload = function() {
        updateNextLevel(0);
      };

      // 更新下一级下拉选项
      function updateNextLevel(currentLevel) {
        // 获取当前所有已选中的值
        const selectedValues = [
          document.getElementById('level1').value,
          document.getElementById('level2').value,
          document.getElementById('level3').value,
          document.getElementById('level4').value
        ];
        
        // 清空当前层级之后的所有下拉
        for (let i = currentLevel + 1; i <= 4; i++) {
          const select = document.getElementById(`level${i}`);
          select.innerHTML = '<option value="">请选择</option>';
          select.disabled = true;
        }
        
        // 调用后端获取下一级选项
        google.script.run
          .withSuccessHandler(options => {
            const nextLevel = currentLevel + 1;
            const select = document.getElementById(`level${nextLevel}`);
            select.innerHTML = '<option value="">请选择</option>';
            options.forEach(opt => {
              const option = document.createElement('option');
              option.value = opt;
              option.textContent = opt;
              select.appendChild(option);
            });
            select.disabled = options.length === 0;
          })
          .getLevelOptions(selectedValues.slice(0, currentLevel + 1));
      }
    </script>
  </body>
</html>

四、部署与测试 #

1. 在脚本编辑器中点击「部署」>「新建部署」
2. 类型选择「Web应用」，执行权限选择「我」，谁可以访问选择「任何人，甚至匿名」（可根据实际需求调整）
3. 点击「部署」，复制生成的Web应用URL，访问即可测试联动效果

关键说明 #

• 支持混合层级场景：如果某条数据只有2级，选中前两级后，后续下拉会自动禁用
• 重复选项处理：后端通过Set自动去重下一级选项，确保下拉菜单选项不重复
• 性能优化建议：数据量较大时，可添加CacheService缓存数据，避免每次请求都读取Sheet

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