Apps Script自定义模态框下拉选项无法加载交互问题

在Google Sheets中通过自定义脚本弹出模态框，需要加载从「BDD」工作表读取数据生成的select下拉选项。单独运行服务端getCDC()函数可正常返回拼接好的option字符串，但模态框内下拉框始终无法加载对应选项。

原有代码问题 #

核心错误是模态框HTML的加载方式不对：

• 使用HtmlService.createHtmlOutputFromFile()只会读取HTML文件的静态原始内容，不会解析文件中<?!=getCDC()?>格式的Apps Script模板标记
• 原有代码中setWidth()、setHeight()的调用顺序错误，在模态框弹出后才设置尺寸，可能导致弹窗尺寸不符合预期

修复方案 #

方案1：服务端模板渲染（适合固定选项场景） #

修改服务端addRow函数，改用模板方式加载HTML并执行渲染，解析嵌入的服务端脚本：

function addRow() {
  const classeur = SpreadsheetApp.getActiveSpreadsheet();
  const feuille = classeur.getActiveSheet();
  const ui = SpreadsheetApp.getUi();
  // 创建HTML模板而非直接读取静态文件
  const widget = HtmlService.createTemplateFromFile("widget.html").evaluate();
  // 先配置模态框参数再弹出
  widget.setWidth(600);
  widget.setHeight(600);  
  ui.showModalDialog(widget, "Add new Row");
}


function getCDC(){
  const classeur = SpreadsheetApp.getActiveSpreadsheet();
  const feuille = classeur.getSheetByName("BDD");
  var services = feuille.getRange("A2:A").getValues().filter(d =>d[0] !== "");
  return services.map(d => "<option>" + d[0] + "</option>").join("")
}

原有widget.html代码不需要修改，模板渲染时会自动执行getCDC()将选项拼接进select节点。

方案2：前端异步加载（适合动态选项场景） #

如果后续需要根据用户输入联动更新下拉选项，可以不使用模板语法，改为前端加载完成后异步拉取选项数据：

1. 服务端addRow函数仅调整宽高设置顺序即可
2. 修改widget.html代码，增加异步拉取逻辑：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // 页面加载完成后请求服务端拉取下拉选项
      window.addEventListener('load', () => {
        google.script.run
          .withSuccessHandler(optionStr => {
            // 将返回的option字符串插入select节点
            document.querySelector('#service').insertAdjacentHTML('beforeend', optionStr);
          })
          .getCDC();
      })
    </script>
  </head>
  <body>
    <p>Input : <input type="text" id="codeArticle"></p>

    <p>Custom Select :
      <select id="service" name="service" class="form-control" required>
        <option disabled selected>Choose ...</option>
      </select>
    </p>

    <input type="button" class="button" value="SUBMIT">
    <input type="button" class="button" value="CLOSE" onclick="google.script.host.close();">
  </body>
</html>

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