如何实现Google Web App下拉列表每日自动更新新增数据项

• 新增数据写入表格时实时更新下拉列表：完全可实现，且实现成本极低，是优先推荐的方案
• 定时任务夜间自动重新部署Web App更新列表：技术上可实现，但极度不推荐。该方案需要调用API操作版本部署、配置高阶权限，部署过程存在服务中断风险，后续还容易因为权限校验失效导致服务不可用，为了更新下拉列表做全量重部署属于典型的过度设计。

你现有代码的核心问题是把下拉选项的生成逻辑放在了doGet的服务端模板渲染阶段，只有Web App重新部署、或者用户首次触发冷启动打开页面时才会拉取一次表格数据，只要把选项拉取逻辑改成前端加载时主动请求后端拿最新数据即可，全程不需要改动现有访问链接。

1. 修改后端.gs代码 #

删除doGet中拼接option字符串的逻辑，新增一个专门给前端调用的、返回最新选项数据的函数，参考代码如下：

const SPREADSHEET_URL = "https://docs.google.com/spreadsheets/d/idcode/edit#gid=0";
const ss = SpreadsheetApp.openByUrl(SPREADSHEET_URL);
const ws = ss.getSheetByName("Draws");

function doGet(e){
  const tmp = HtmlService.createTemplateFromFile("page");
  tmp.title = "Title";
  const html = tmp.evaluate().setTitle('Team Selection WebApp');
  const htmlOutput = HtmlService.createHtmlOutput(html); 
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');  
  return htmlOutput
}

// 供前端调用，返回最新的下拉选项数据
function getLatestSelectOptions() {
  // 拉取A列男子选手列表
  const mLastRow = ws.getRange("A1").getDataRegion().getLastRow();
  const mList = ws.getRange(1, 1, mLastRow).getValues().flat();
  // 拉取E列女子选手列表
  const fLastRow = ws.getRange("E1").getDataRegion().getLastRow();
  const fList = ws.getRange(1, 5, fLastRow).getValues().flat();
  return { mList, fList }
}

2. 修改前端HTML代码 #

移除原来模板注入<?!= mlist; ?>的写法，在页面加载完成后自动调用后端接口拉取最新数据，再渲染到下拉框中，参考代码如下：

<select class="form-select form-select-sm" id="m_p1" onchange="getDrawNumOne()">
  <option selected>Men's Player 1</option>
</select>
<!-- 其余同类型下拉选择框保留默认占位选项即可 -->

<script>
window.addEventListener('load', () => {
  // 调用后端接口拉取最新选项
  google.script.run
    .withSuccessHandler(options => {
      // 渲染所有男子选手选择框（适配id以m_p开头的下拉框）
      document.querySelectorAll('select[id^="m_p"]').forEach(selectEl => {
        options.mList.forEach(name => {
          if (!name) return; // 跳过空单元格
          const opt = document.createElement('option');
          opt.value = name;
          opt.textContent = name;
          selectEl.appendChild(opt);
        })
      })
      // 渲染所有女子选手选择框（适配id以f_p开头的下拉框）
      document.querySelectorAll('select[id^="f_p"]').forEach(selectEl => {
        options.fList.forEach(name => {
          if (!name) return;
          const opt = document.createElement('option');
          opt.value = name;
          opt.textContent = name;
          selectEl.appendChild(opt);
        })
      })
    })
    .withFailureHandler(err => {
      console.error('列表加载失败', err);
      alert('选手列表加载异常，请刷新页面重试');
    })
    .getLatestSelectOptions();
})
</script>

实时更新扩展说明 #

如果需要实现「表格新增数据后，已经打开页面的用户不需要刷新就能看到新选项」，只需要给表格绑定onChange可安装触发器，数据更新时在缓存中写入更新标记，前端加个30秒一次的轻量轮询检查标记，发现有更新就重新拉取一次选项即可，不需要做复杂的长连接推送，完全能满足日常使用需求。

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