在 Google 表格上使用带有 Google Apps 脚本的 HTML 下拉菜单答案

【问题标题】：Using an HTML drop-down menu with Google Apps Script on Google Sheets在 Google 表格上使用带有 Google Apps 脚本的 HTML 下拉菜单
【发布时间】：2015-11-13 21:15:21
【问题描述】：

我正在 Google 表格上运行一项功能，该功能要求用户从（相当长的）选项列表中进行选择。由于 UI 服务已被弃用，我想我会尝试使用 HTML，但我对此一无所知。我需要弹出 HTML 用户界面，让用户从列表中选择一个名称，然后在将名称传递回应用程序脚本函数后离开。我试图拼凑一些代码，但我似乎不能总是让下拉菜单弹出，而且我似乎无法弄清楚如何将选择发送回原始功能。帮忙？

function genDiscRep(){
var ss=SpreadsheetApp.getActive();
var dontTouch=ss.getSheetByName("Do Not Touch");
var studentNamesArrayLength=dontTouch.getLastRow()-1000+1
var studentNames=dontTouch.getRange(1000,3,studentNamesArrayLength,1).getValues();
var test=HtmlService.createHtmlOutputFromFile('index')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
Browser.msgBox(test);
}

然后是我的 html 代码（为清楚起见，删除了大多数选项）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select to Autocomplete</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.select-to-autocomplete.js"></script>
<script>
  (function($){
    $(function(){
      $('select').selectToAutocomplete();
      $('form').submit(function(){
        alert( $(this).serialize() );
        return false;
      });
    });
  })(jQuery);
</script>
<link rel="stylesheet" href="jquery-ui.css">
<style>
  body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
  }
.ui-autocomplete {
  padding: 0;
  list-style: none;
  background-color: #fff;
  width: 218px;
  border: 1px solid #B0BECA;
  max-height: 350px;
  overflow-x: hidden;
}
.ui-autocomplete .ui-menu-item {
  border-top: 1px solid #B0BECA;
  display: block;
  padding: 4px 6px;
  color: #353D44;
  cursor: pointer;
}
.ui-autocomplete .ui-menu-item:first-child {
  border-top: none;
}
.ui-autocomplete .ui-menu-item.ui-state-focus {
  background-color: #D5E5F4;
  color: #161A1C;
}
</style>
</head>
<body>
<form>
<select name="Student" id="name-selector" autofocus="autofocus"     autocorrect="off" autocomplete="off">

<option value="" selected="selected">Select Student</option>

<option value="Abercrombie, Amber">Abercrombie, Amber(Gr 11)</option>
<option value="Yupa, Jason">Yupa, Jason(Gr 9)</option>
</select>

<input type="submit" value="Submit" onclick="myFunction()">
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("name-selector").value;
document.getElementById("demo").innerHTML = x;
var ss=SpreadsheetApp.getActive();
Browser.msgBox(ss.getSheetName());

}
</script>

</body>
</html>

对于 html 代码的长度，我深表歉意。我不确定我可以省略什么并仍然提供足够的信息。 html 的开头是使用Jamie Appleseed's open-source code that allows auto-complete and auto-correction of a drop-down menu 的尝试。（那部分似乎也不起作用，但我想一次只做一件事）。

【问题讨论】：

标签： html drop-down-menu google-apps-script google-sheets

【解决方案1】：

你不能使用Browser.msgBox(test); 使用SpreadsheetApp.getUi(). etc

function genDiscRep() {
  var ss = SpreadsheetApp.getActive();
  var dontTouch = ss.getSheetByName("Do Not Touch");
  var studentNamesArrayLength=dontTouch.getLastRow()-1000+1;
  var studentNames=dontTouch.getRange(1000,3,studentNamesArrayLength,1).getValues();

  var test = HtmlService.createHtmlOutputFromFile('index')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);

  SpreadsheetApp.getUi()
    .showModalDialog(test, 'User Input')
};

您必须使用google.script.run.myFunction() 与服务器端代码通信：

google.script.run
  .functionToRunOnFormSubmit(x);

使用google.script.host.close()关闭对话框。

索引.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select to Autocomplete</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.select-to-autocomplete.js"></script>
<script>
  (function($){
    $(function(){
      $('select').selectToAutocomplete();
      $('form').submit(function(){
        alert( $(this).serialize() );
        return false;
      });
    });
  })(jQuery);
</script>
<link rel="stylesheet" href="jquery-ui.css">
<style>
  body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
  }
</style>
</head>
<body>
<form>
<select name="Student" id="name-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

<option value="" selected="selected">Select Student</option>

<option value="Abercrombie, Amber">Abercrombie, Amber(Gr 11)</option>
<option value="Yupa, Jason">Yupa, Jason(Gr 9)</option>
</select>

<input type="submit" value="Submit" onclick="myFunction()">
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("name-selector").value;
document.getElementById("demo").innerHTML = x;

  google.script.run
    .functionToRunOnFormSubmit(x);

  google.script.host.close();

}
</script>

</body>
</html>

需要有第二个函数来处理来自用户输入的返回：

代码.gs

function functionToRunOnFormSubmit(fromInputForm) {
  var ss = SpreadsheetApp.getActive();
  ss.getSheetByName("Do Not Touch").getRange(2, 2, 1, 1).setValue(fromInputForm);
};

【讨论】：