Question

我想将用户输入记录在特定类别下-为此，我希望用户从下拉列表中选择一个类别，并希望有另一个文本单元格可以输入文本。

我的目标是使用特定条件填充下拉列表，然后将用户选择和其他文本字符串记录到变量中，然后将其写入电子表格中。

编辑：我已经能够创建下拉列表并填充它-但是，从下拉列表中选择的输入只是偶尔返回到电子表格（它在30次尝试中已经工作了两次）。

EDIT2：如果我从代码中删除了google.script.host.close();，那么var将被传递回电子表格。对话框似乎关闭得太快，但是sleep()函数中的functionToRunOnFormSubmit(fromInputForm)根本没有延迟代码。

Code.js：

function fncOpenMyDialog() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('addDeck')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(150);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'Add a New Deck');
};


function functionToRunOnFormSubmit(fromInputForm) {

Logger.log(fromInputForm);

  var ss = SpreadsheetApp.getActive();
  ss.getSheetByName("test").getRange(2, 1, 1, 1).setValue(fromInputForm);
};

addDeck.html

<!DOCTYPE html>
<html>
<body>
<form>

<select name="Class" id="class-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

  <option value="" selected="selected">Class</option>

  <option value="Druid">Druid</option>
  <option value="Hunter">Hunter</option>
  <option value="Mage">Mage</option>
  <option value="Paladin">Paladin</option>
  <option value="Priest">Priest</option>
  <option value="Rogue">Rogue</option>
  <option value="Shaman">Shaman</option>
  <option value="Warlock">Warlock</option>
  <option value="Warrior">Warrior</option>
</select>

<input type="submit" value="Submit" onclick="myFunction()">
</form>
<p id="addDeck"></p>

<script>
function myFunction() {
var x = document.getElementById("class-selector").value;
document.getElementById("addDeck").innerHTML = x;

  google.script.run
    .functionToRunOnFormSubmit(x);

  google.script.host.close();

}
</script>

</body>
</html>

代码主要来自Using an HTML drop-down menu with Google Apps Script on Google Sheets-也来自How to create a drop down list in (App Script) Spreadsheet Input Box?

我仍然需要添加一个文本单元格以供用户输入，并将该值返回给电子表格。

任何帮助将不胜感激，谢谢！

Answer 1

您要检索下拉列表的值并将其放在活动电子表格上的“测试”表中。
您想要将新的文本输入字段放入HTML并检索输入的值。然后，您要将值与下拉列表的值放到电子表格中。

如果我的理解是正确的，那么该修改如何？

修改后的脚本

Google Apps脚本：

从：

ss.getSheetByName("test").getRange(2, 1, 1, 1).setValue(fromInputForm);

至：

ss.getSheetByName("test").getRange(2, 1, 1, 2).setValues([[fromInputForm.Class, fromInputForm.sample]]);

HTML：

有2个修改部分。

从：

<input type="submit" value="Submit" onclick="myFunction()">

至：

<input name="sample" type="text"> <!-- Added -->
<input type="submit" value="Submit" onclick="myFunction(this.parentNode)"> <!-- Modified -->

和

从：

function myFunction() {
  var x = document.getElementById("class-selector").value;
  document.getElementById("addDeck").innerHTML = x;
  google.script.run
    .functionToRunOnFormSubmit(x);
  google.script.host.close();
}

至：

withSuccessHandler()用于此。

function myFunction(obj) { // Modified
  var x = document.getElementById("class-selector").value;
  document.getElementById("addDeck").innerHTML = x;
  google.script.run // Modified
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}

参考：

withSuccessHandler()

如果我误解了您的问题，而这不是您想要的结果，我深表歉意。

如何创建一个包含下拉列表的HTML对话框？

Code.js：

addDeck.html

1 个答案:

修改后的脚本

Google Apps脚本：

HTML：

参考：