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

Question

I have two columns in Sheet, A is College name, and B is City Name. I want to create a form, where there will be two drop downs. First is for city, second is for college. Then if you select city in first drop down, the second drop down should show college from that city only.

The Approach I took was,
Read data from sheet and create array for cities. Pass two variables, array of city and 2D array of college and city to HTML via evaluate

 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')); } 

Till here it is all OK. Next in HTML Form, create two drop downs. and from City Dropdown, call onChange function that will change the drop down options of college list

  <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> 

Now in onChange function, I need to access variable called "CollegeList", so that I can filter the list of college from this city and create the options, but I am not able to access the variable "CollegeList" inside <Script> tag.

 <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> 

When I try to create random options without using the variable "CollegeList", the option gets created, means the way options are being created is working. Only the variable is not working. Please help.

Answer 1

I think you forgot to access the CollegeList variable using the scriptlet syntax <?=CollegeList?> . I generally create client-side javascript variables with the same name as the server-side variables at the top of the html as follows:

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

You can then use cities and CollegeList in the rest of your javascript.