在 Google 脚本自定义对话框中创建下拉菜单，使用 Google Sheet 中数据的选项

Question

我希望在您运行脚本时在自定义对话框中创建下拉菜单。我已经成功地这样做了，并且还能够在一个元素中创建一个循环，该循环从静态数组 [即几个月的数组并创建一个下拉菜单]。但是，我无法从 google sheet 中提取数据并使用该数据创建下拉菜单。

用于从数组创建下拉菜单的示例代码：

<form>
<select name="Month-test" id="month-selector-test" autofocus="autofocus" autocorrect="off" autocomplete="off">
  <option value="" selected="selected" id="todays-month"></option>
   <script> 
   // select this element
  var currentDayList = document.getElementById('month-selector-test');
  // array of all months
  var allMonthsAbv = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  // for every element in the array, add an option
  for (var i=0; i<allMonthsAbv.length; i++) {
    currentDayList.innerHTML += '<option value=' + allMonthsAbv[i] + '>' + allMonthsAbv[i] + '</option>';
  }    
  </script>
</select>
</form>

无法根据 sheet 中的数据创建下拉菜单的示例代码：

<form>
<select name="Month" id="month-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
  <option value="" selected="selected"></option>
    <script>
    var monthList = document.getElementById('month-selector');
    
    var allData = SpreadsheetApp.openById('###ID###').getSheetByName('###NAME###').getDataRange().getValues();
    var list = [];
    for (var i=1;i<allData.length;i++) {
      var schoolName = allData[i][1];
      if (schoolName != "") {
      list.push(schoolName);
      }
    }
   for (var i = 0;i<list.length;i++) {
    monthList.innerHTML += '<option value=' + list[i] + '>' + list[i] + '</option>';
  }  
  </script>
</select>
</form>

Answer 1

您使用的 pop 不正确。将 list.pop 更改为 list.push

  var monthList = document.getElementById('month-selector');

  var allData = SpreadsheetApp.openById('###ID###').getSheetByName('###NAME###').getDataRange().getValues();
  var list = [];
  for (var i=1;i<allData.length;i++) {
      var schoolName = allData[i][1];
      if (schoolName != "") {
        list.push(schoolName);
      }
    }
   for (var i = 0;i<list.length;i++) {
    monthList.innerHTML += '<option value=' + list[i] + '>' + list[i] + '</option>';
  }

Answer 2

我确实编写过并经常使用可以满足您要求的代码。所以我可以肯定地说，这是可以做到的。

我要补充一点，这样做非常有用。电子表格是非编码人员可以愉快地更新的东西，然后我们从中生成代码。

关于您提供的代码，让我感到困惑的是您在 HTML.

中对 SpreadsheetApp 的使用

我只在 GAS 代码中这样做过。您可能知道一些我不知道的事情，或者这可能是回答您问题的开始。

我经常使用 google.script.run 你呢？

Answer 3

所以下一个问题是 - 你能不能在前景 (HTML) 和背景 (GAS) 之间轻松、规律地移动

我问这个是因为它对我来说是关键

Answer 4

好的 - 我已经完成了我之前应该做的事情并尝试了运行你的代码并提出了许多 非常不同的 （即分开，但是非常明确）的问题。我还剩下一个尚未解决的问题，但我想我应该及时通知您。在输入工作代码之前，我会尝试解决所有这些问题。

代码什么时候触发？此 必须在 HTML 正文加载事件中发生 才能填充下拉列表。我知道要在 GAS 中的那个点触发代码的唯一方法是通过 "successHandler" 进行 GAS 调用。因此： nullFunction()（GAS，即后端）什么都不做，它只是在加载正文时调用 addMonths()，然后填充下拉列表。
select 标签支持哪些属性？您正在使用 id 和关联的 getElementById() 调用，但 select 不支持 id 属性，因此：然后，您必须了解 getElementsByName() returns 节点列表这一事实，因此您需要添加到该列表中 [0] 的 innerHtml。因此： var currentDayList = document.getElementsByName('month-selector-test')[0];
方块应该放在哪里？这有两个方面。你已经把它放在街区里了。但是，如果它在那里，它将作为 innerHtml 的一部分由您的代码处理，所以它不能去那里！如果你把它放在 onload 触发时它还没有加载，所以它必须在

这是工作代码：

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
<body onload='google.script.run.withSuccessHandler(addMonths).nullFunction();'>
  x x x 
<select name="month-selector-test">
</select>
   <script> 
  var currentDayList = document.getElementsByName('month-selector-test')[0];
   function addMonth(monthAbv){
   text=currentDayList.innerHTML;
  var firstPart='\<option value=\"';
  var secondPart='\"\>';
  var thirdPart='\<\/option\>';
  text=text + firstPart+name  + secondPart  + monthAbv + thirdPart;
  currentDayList.innerHTML+=text;
  }
  function addMonths(){
  var allMonthsAbv = ["Jan","Feb"];
  //"Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  // for every element in the array, add an option
  for (var i=0; i<allMonthsAbv.length; i++) {
   addMonth(allMonthsAbv[i]);
    }
  }
  </script>
  </body>
</html>

在 Google 脚本自定义对话框中创建下拉菜单，使用 Google Sheet 中数据的选项

Creating drop-down menu in Google Script custom dialogue, with options from data in a Google Sheet

html

javascript

google-apps-script

google-sheets-api