Google Apps脚本：访问.evaluate（）内部发送的访问变量<script> tag in HTML Page

Question

我在工作表中有两列，A是大学名，B是城市名。 我想创建一个表单，其中将有两个下拉菜单。 首先是城市，其次是大学。 然后，如果您在第一个下拉列表中选择城市，则第二个下拉列表应仅显示该城市的大学。

我采取的方法是
从工作表中读取数据并创建城市数组。 通过评估将两个变量（城市数组和学院和城市的二维数组）传递给HTML

 function showSidebarAddNew() { var ss=SpreadsheetApp.getActiveSpreadsheet(); var sheet=ss.getSheetByName('option'); var CollegeList=sheet.getDataRange().getValues(); var cities=[]; for(var d=0; d<CollegeList.length; d++) { if(cities.indexOf(CollegeList[d][1])==-1){cities.push(CollegeList[d][1])} } var ui = SpreadsheetApp.getUi(); var template = HtmlService.createTemplateFromFile('form'); template.cities=cities; template.CollegeList=CollegeList; ui.showSidebar(template.evaluate().setTitle('New Form')); } 

直到这里一切都OK。 接下来在HTML表单中，创建两个下拉菜单。 然后从“城市下拉菜单”中调用onChange函数，该函数将更改大学列表的下拉选项

  <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="city">Colleges </label> <select name="city" size="1" id="college"> <option hidden selected></option> </select> <br> <input type="submit" class="btn btn-primary" value="Submit"> </form> 

现在，在onChange函数中，我需要访问名为“ CollegeList”的变量，以便可以从该城市过滤大学列表并创建选项，但是我无法访问<Script>标记内的变量“ CollegeList”。

 <script type="text/javascript"> function UpdateRange(v) { //clear all options from list document.getElementById('college').options.length = 0; //add default (blank) option var optn = document.createElement("OPTION"); optn.text = ''; optn.value = ''; document.getElementById('college').options.add(optn) var thisCity=CollegeList.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]; document.getElementById('college').options.add(optn) } } </script> 

当我尝试不使用变量“ CollegeList”创建随机选项时，将创建该选项，这意味着正在创建选项。 只有变量不起作用。 请帮忙。

Answer 1

我认为您忘记了使用scriptlet语法<?=CollegeList?>访问CollegeList变量。 我通常使用与html顶部的服务器端变量相同的名称来创建客户端javascript变量，如下所示：

<script>
  var CollegeList = <?=CollegeList?>
  var cities = <?=cities?>
</script>

然后，您可以在其余的javascript中使用cities和CollegeList 。