动态弹出下拉表单 Google Apps 脚本

Question

我的电子表格的“摘要”选项卡中有一个项目列表，此列表更改相对频繁，但选项的数量限制为 17 个，其中一些有时可能为空。我想将可用选项（非空）放入带有下拉列表的弹出窗口中。然后将该值输入到特定单元格（暂时称为摘要 C55）。

我认为我的 GS 代码是正确的，我在 HTML 组件上迷路了。列表即将出现，没有任何选项。

.GS

function getValuesFromSpreadsheet() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName("Summary");
  //available characters found in P2:P18 of Summary tab
  var options=[];
  var va=sheet.getRange("P2:P18").getValues();
  for (var i=0;i<va.length;i++){
  options.push(va[i][0]);
  Logger.log(options);
}
  return options; // Retrieve values and send to Javascript
}  

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('popup').setWidth(400).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select your new character');
}
function select(){
   var menu= SpreadsheetApp.getUi().createMenu('Custom Menu');
      menu.addItem('Dropdown Form', 'showDialog');
      menu.addToUi();
}

function onOpen(e){
select();
}

popup.HTML

<!DOCTYPE html>
<script>
    function loadCharacters() {
    google.script.run.withSuccessHandler(makeoptions) 
    .getValuesFromSpreadsheet();
    }
       function makeoptions(ar){
        var charselect = document.createElementById('character');
        console.log(ar);
        for (var i=0;i<ar.length;i++);
        var option = document.createElement("option");
        option.value = ar[i]
        option.id = ar[i];
        charselect.appendChild(option);
  };
  function selected() {
    var value = document.getElementById('character').value;
    document.getElementById("value").innerHTML=value;
    console.log(value);
  };
</script>
<html>
 <head>
  <base target="_top">
</head>
  <body onload="loadCharacters()">
  <form id="Form">
    <div>
       <label for="List"> Select Character </label><br>
        <input list="character" name="charselect">
        <datalist id= "character"></datalist>
        <select id="character" onchange="selected()"> </select><br>
    </div>
    </form>
  </body>
</html>

Answer 1

看起来您正在创建 SELECT 控件，而不是获取 HTML 上已经存在的控件。尝试更改以下行：

var charselect = document.createElementById('character');

收件人：

var charselect = document.getElementById('character');

由于有两个元素具有相同的 ID，您可能应该删除它：

<datalist id= "character"></datalist>

此外，您需要包含每个选项的内部 HTML（在将 child 附加到 SELECT 之前）以显示可用的字符名称：

option.innerHTML = ar[i];

更新：

我意识到For循环里面没有任何东西，所以它也需要改变：

function makeoptions(ar) {
  var charselect = document.getElementById('character');
  console.log(ar);
  for (var i = 0; i < ar.length; i++){
    var option = document.createElement('option');
    option.value = ar[i];
    option.id = ar[i];
    option.innerHTML = ar[i];
    charselect.appendChild(option);
  }
}

除此之外，HTML的其他一些部分也需要更新，例如select函数：

function selected() {
  var value = document.getElementById('character').value;
  document.getElementById('value').value = value;
  console.log(value);
}

并且输入控件中缺少 ID 属性： <input list="character" name="charselect" id='value'/>

This value would then be input into a specific cell (call it Summary C55 for now).

至于将 selection 写回电子表格，您可以将其添加到 select 函数的末尾：google.script.run.withSuccessHandler(selectionWritten).writeSelection(value);.

您可以使用类似以下内容来确认 HTML 上的操作：

function selectionWritten() {
  console.log('selection written to spreadsheet');
}

然后您在 Apps 脚本端包含如下内容：

function writeSelection(value){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName("Summary");
  sheet.getRange('C55').setValue(value);
}

根据我的尝试，它似乎适用于这些额外的更改。

动态弹出下拉表单 Google Apps 脚本

Dynamic Popup Dropdown Form Google Apps Script

html

javascript

google-apps-script

drop-down-menu

.GS

popup.HTML