Question

运行脚本时，我希望在自定义对话框中创建一个下拉菜单。我已经成功地做到了这一点，并且还能够在一个元素中创建一个循环，该循环从静态数组创建下拉列表[即数月的数组并创建一个下拉菜单]。但是，我无法从Google工作表中整理数据并使用该数据创建下拉菜单。

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

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

无法从工作表中的数据创建下拉菜单的示例代码：

<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正文onload事件中的必须发生，以便填充下拉列表。我知道要在此时在GAS中触发代码的唯一方法是通过GAS调用的“ successHandler”。因此： nullFunction（）（GAS，即后端）不执行任何操作，只会导致在加载主体并填充下拉列表时调用addMonths（）。
select标记支持哪些属性？您正在使用id和关联的getElementById（）调用，但是select不支持id属性，因此：然后，您必须注意getElementsByName（）返回节点列表这一事实，因此您需要在该列表中添加[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表格中数据的选项

4 个答案: