Google Apps Script：无法在HTML脚本标签访问evaluate传递的变量

你遇到的问题很典型——通过Google Apps Script模板传递的CollegeList变量是在服务器端渲染HTML时生成的，而客户端的<script>代码是在浏览器里运行的，默认情况下没法直接访问这些服务器端注入的变量。得把这个变量显式地暴露给客户端的JavaScript环境才行。

步骤1：在HTML模板中注入全局变量 #

在你的HTML文件里，在<script>标签之前，把CollegeList转换成JSON字符串并赋值给一个全局变量。这样客户端JS就能直接读取了：

<!-- 在script标签前添加这段，把服务器端的CollegeList注入到客户端 -->
<script>
  // 将服务器端传递的CollegeList转成客户端可访问的全局变量
  const collegeData = <?= JSON.stringify(CollegeList) ?>;
</script>

步骤2：修改客户端的UpdateRange函数 #

然后把原来的UpdateRange函数里的CollegeList换成刚才定义的collegeData，同时注意你原来的代码里filter函数后面少了一个闭合括号，这个也要补上：

<script type="text/javascript">
function UpdateRange(v) {
  // 清空院校下拉框的所有选项
  const collegeSelect = document.getElementById('college');
  collegeSelect.options.length = 0;

  // 添加默认空白选项
  var optn = document.createElement("OPTION");
  optn.text = '';
  optn.value = '';
  collegeSelect.options.add(optn);

  // 筛选对应城市的院校（补上filter的闭合括号）
  const thisCity = collegeData.filter(function (dr) {
    return dr[1] === v;
  });

  // 生成院校选项
  for (var i = 0; i < thisCity.length; i++) {
    var optn = document.createElement("OPTION");
    optn.text = thisCity[i][0];
    optn.value = thisCity[i][0];
    collegeSelect.options.add(optn);
  }
}
</script>

完整的修改后HTML代码 #

把这些整合起来，我还帮你修正了一个小错误：原来的院校下拉框name属性写成了city，应该改成college，这样表单提交时参数名才准确。最终HTML代码如下：

<form id="form1">
  <label for="city">City </label>
  <select name="city" size="1" id="city" onchange="UpdateRange(this.value);">
    <option hidden selected></option>
    <?for(var c=0; c<cities.length; c++){?>
      <option value="<?=cities[c]?>"><?=cities[c]?></option>
    <?}?>
  </select>

  <label for="college">Colleges </label>
  <select name="college" size="1" id="college">
    <option hidden selected></option>
  </select>
  <br>
  <input type="submit" class="btn btn-primary" value="Submit">
</form>

<!-- 注入全局变量 -->
<script>
  const collegeData = <?= JSON.stringify(CollegeList) ?>;
</script>

<!-- 处理下拉框更新的脚本 -->
<script type="text/javascript">
function UpdateRange(v) {
  const collegeSelect = document.getElementById('college');
  collegeSelect.options.length = 0;

  // 添加空白选项
  var optn = document.createElement("OPTION");
  optn.text = '';
  optn.value = '';
  collegeSelect.options.add(optn);

  // 筛选对应城市的院校
  const thisCity = collegeData.filter(dr => dr[1] === v);

  // 添加院校选项（用forEach简化代码）
  thisCity.forEach(item => {
    var optn = document.createElement("OPTION");
    optn.text = item[0];
    optn.value = item[0];
    collegeSelect.options.add(optn);
  });
}
</script>

为什么这样可行？ #

当Google Apps Script的template.evaluate()运行时，<?= JSON.stringify(CollegeList) ?>会被替换成实际的JSON字符串（比如[["北京大学","北京"],["清华大学","北京"]]）。这样客户端的JavaScript就能直接把这个JSON字符串解析成数组，作为全局变量collegeData来使用了。

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