将 HTML 选择存储到变量中/在 Google 表格中使用该数据答案

【问题标题】：Storing an HTML selection into a variable / using that data in Google Sheets将 HTML 选择存储到变量中/在 Google 表格中使用该数据
【发布时间】：2020-06-07 06:44:30
【问题描述】：

我几乎可以使用 HTML 表单选择器，它根据来自 google 表格列的数据创建一个数组（完成）并将该数据填充到下拉框（完成）。

我整个周末都在尝试弄清楚如何捕获下拉选项的选择，然后将其集中到一个变量中。

这是我启动 HTML 弹出窗口的 google 脚本代码：

function ClientDropDownHTML() {
  var template = HtmlService.createTemplateFromFile('index');  
  var htmlDlg = template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
  //  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
//   var lastRow = sheet.getLastRow();
 //  var myArray = sheet.getRange('A2:A' + lastRow).getValues();
  .setWidth(500)
  .setHeight(150);
  SpreadsheetApp.getUi()
  .showModalDialog(htmlDlg, 'Select An Existing Client');
}

HTML 下拉菜单运行。这是我的 HTML 表单的代码，它在 Google 表格数据上运行数组并将其填充为选择器：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form id="myForm">
  <select id="selectClient">
    <option>Choose an Existing Client</option>
         
    <?  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); ?>
   <?   var clientindex = sheet.getRange('T2').getValue(); ?>
   <?   var myArray = sheet.getRange('V2:V' + clientindex).getValues(); ?>
  
    <? for (var i = 0; i < myArray.length; ++i) { ?>
     <option> <?=myArray[i]?> </option>
     <? } ?>

  </select>

</form>
  </body>
</html>

这就是我卡住的地方。在后面，我需要确保我可以捕获选择，所以我尝试记录它 - 我尝试过类似这里看到的东西：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#Example

我的 HTML 最终得到如下内容：

<? var select = document.getElementById('selectClient'); ?>

<? console.log(select.selectedIndex); ?>
<? console.log(select.options[select.selectedIndex].value)  ?>

但是，如果我这样做，我只会收到“未定义文档”错误。

我在这个网站上阅读了不同的问题，但似乎没有一个解决方案适合我。

简而言之，我需要一种方法：

从 HTML 中引用用户的选择将其存储在变量中能够将该变量移回 Google 表格。

【问题讨论】：

去掉<?和?>，把客户端代码放到<script>标签中
您需要在您的选择上添加一个操作：onchange="google.script.run.myGSfunction(this.value)"

标签： html google-apps-script google-sheets dropdown

【解决方案1】：

从选择标签中进行选择

GS：

function getClientList() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet15');
  var vA=sh.getRange(2,1,sh.getLastRow()-1,1).getValues();
  return vA;
}

function selectClient(client) { 
  SpreadsheetApp.getUi().alert('Client is ' + client);
}

function runTwo() {
  var ui=HtmlService.createHtmlOutputFromFile('ah2');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Select Client')
}

HTML('ah2'):

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form id="myForm">
  <select id="sel1" onchange="selClient()"></select>
</form>
  <script>
  $(function(){
    google.script.run
    .withSuccessHandler(function(vA){
      updateSelect(vA);
    })
    .getClientList();
  });
  function updateSelect(vA,id){
      var id=id || 'sel1';
      var select = document.getElementById(id);
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i],vA[i]);
      }
    }
    
  function selClient() {
    google.script.run.selectClient($('#sel1').val());
  }
  </script>


  </body>
</html>

第 15 页：

【讨论】：