如何从Google Sheet获取值填充HTML<select>下拉菜单

你写的代码跑不通是三个低级错误导致的：

• 侧边栏里的JS是跑在用户浏览器里的前端代码，根本不认SpreadsheetApp这种只能在Google服务端运行的API，你把读表代码直接塞HTML的script标签里，这段代码从根上就执行不了
• Google Apps Script的服务端代码和侧边栏前端代码是完全隔离的，必须用官方提供的google.script.run接口做通信，你没写通信逻辑，两边根本传不了数据
• 你把script标签塞在了<option>标签内部，本身就不符合HTML语法，就算JS能执行也渲染不出选项
• 原代码最后一行SpreadsheetApp.newTextStyle().setBold(true)是无效废代码，只创建了样式对象没有应用到任何内容，没有实际作用

1. Google Apps Script 服务端代码（.gs文件） #

保留原侧边栏唤起逻辑，新增专门供前端调用的读表函数：

function mediaplanAdminSidebar() {
  var widget = HtmlService.createHtmlOutputFromFile('mediaplan').setTitle('HELP');
  SpreadsheetApp.getUi().showSidebar(widget);
}

// 读取指定工作表的活动名称列表，返回给前端
function getCampaignList() {
  // 直接获取当前打开的工作簿，不需要硬写表格ID
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('[PAID] #1-Activity tracker');
  // 读取F列从第7行开始的1000行数据
  const rangeValues = sheet.getRange(7, 6, 1000).getValues();
  // 把二维数组转成一维，过滤掉空单元格，避免生成空白选项
  return rangeValues.flat().filter(item => item.toString().trim() !== '');
}

2. HTML 前端代码（mediaplan文件） #

删掉option标签里的无效脚本，加通信和动态渲染逻辑：

<html>
  <head>
    <style>
      span{font-size: 34px;font-weight: bold;font-family: sans-serif;}
      text{font-size: 24px;font-family: sans-serif;}
      p,label{font-size: 14px;font-family: sans-serif;}
    </style>
  </head>
  <body>
    <br/><span>Paid Social</span>
    <br/><text>Media planner</text>
    <p>Through this menu you will be able to produce a slide deck containing basic media buying info as well as the forecast for a campaign of your choice.</p>
    
    <label>Select your campaign:</label><br/>
    <div>
        <select id="campaignSelect">
          <!-- 选项由JS动态生成，不需要硬编码 -->
        </select>
    </div>

    <script>
      // 页面加载完成后自动拉取活动列表
      window.onload = function() {
        google.script.run
          .withSuccessHandler(renderOptions) // 拉取成功后执行渲染
          .withFailureHandler(err => alert("读取活动列表失败：" + err.message)) // 拉取失败弹提示
          .getCampaignList();
      }

      // 把拿到的活动列表渲染到下拉菜单
      function renderOptions(campaignList) {
        const selectEl = document.getElementById('campaignSelect');
        campaignList.forEach(campName => {
          const option = document.createElement('option');
          option.value = campName;
          option.textContent = campName;
          selectEl.appendChild(option);
        })
      }
    </script>
  </body>
</html>

• 所有读表、修改表格的操作逻辑必须写在.gs后缀的服务端文件里，不能直接写在HTML的script标签中
• 前端需要拿服务端数据时，统一用google.script.run.服务端函数名()的方式调用，不能跨环境直接访问服务端变量
• withSuccessHandler用来指定服务端函数执行成功后的前端回调，服务端return的结果会作为参数传入这个回调函数
• 从表格里用getValues()读出来的数据是二维数组，必须先扁平化、过滤空值再返回，否则下拉菜单会出现大量空白选项

内容的提问来源于stack exchange，提问作者A. Prats