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

Question

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

google-apps-scriptdrop-down-menugoogle-sheets

3

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

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

编辑：我已经能够创建下拉列表并进行填充 - 但是来自下拉列表的所选输入只有在很少情况下返回到电子表格（约30次尝试中只有两次成功）。

编辑2：如果我从代码中删除google.script.host.close(); ，则变量将传回电子表格。看来对话框关闭得太快了，但是functionToRunOnFormSubmit(fromInputForm)函数中的sleep()没有延迟代码。

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>

代码主要来自于在Google Sheets上使用HTML下拉菜单的Google Apps脚本，还有如何在（App Script）电子表格输入框中创建下拉列表？

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

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

- Aaron Irvine

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tanaike · Accepted Answer

您想获取下拉列表的值并将其放入活动电子表格上“test”工作表中。
您想在HTML中添加新的文本输入字段并检索输入的值。然后，您想将下拉列表的值与文本输入字段的值一起放入电子表格。

如果我的理解是正确的，那么修改如下：

修改后的脚本

Google Apps Script：

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

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

HTML:

有两个修改部分。

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

如果我误解了你的问题，这不是你想要的结果，我很抱歉。