如何创建一个包含下拉列表的HTML对话框？ [英] How can I create a HTML dialog box that contains a dropdown list?
问题描述
我想将用户输入记录在特定类别下-为此，我希望用户从下拉列表中选择一个类别，并且还希望有另一个文本单元格可以在其中输入文本。
I want to record user input under specific categories - for this I wish to have the user select a category from a drop down list, and also have another text cell where they can enter text.
我的目标是使用特定条件填充下拉列表，然后将用户选择和其他文本字符串记录到变量中，然后将其写入电子表格中。
My goal is to populate the drop down with specific criteria, then record the users selection and additional text string into variables that are then written into the spreadsheet.
编辑：我已经能够创建下拉列表并填充它-但是，从下拉列表中选择的输入只是偶尔返回到电子表格（它在30次尝试中已经工作了两次）。
I have been able to create the drop down and populate it - however the selected input from the drop down is only returning to the spreadsheet very sporadically (it has worked twice in about 30 attempts).
EDIT2：如果我从代码中删除了 google.script.host.close（）; ，则该变量将被传递回电子表格。似乎对话框关闭太快，但是 functionToRunOnFormSubmit（fromInputForm）函数中的 sleep（）
If I remove google.script.host.close(); from the code then the var is passed back to the spreadsheet. It appears that the dialog box is closing too quickly, but sleep() in the functionToRunOnFormSubmit(fromInputForm) function is not delaying the code at all.
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
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>
代码主要来自-也在中使用-html-drop-down-menu-with-google-apps-script-on-google-sheets href = https://stackoverflow.com/questions/32902865/how-to-create-a-drop-down-list-in-app-script-spreadsheet-input-box?rq=1>如何创建（应用脚本）电子表格输入框中的下拉列表？
我仍然需要为用户输入添加文本单元格并将该值返回到电子表格。
I still need to add a text cell for user input and return that value to the spreadsheet.
任何帮助将不胜感激，谢谢！
Any help would be greatly appreciated, thank you!
推荐答案
- 您要检索下拉列表的值并将其放在活动电子表格上的测试表中。
- 您要添加新文本输入字段到HTML并检索输入的值。然后，您要将值和下拉列表的值放到电子表格中。
如果我的理解是正确的，那怎么办？
If my understanding is correct, how about this modification?
ss.getSheetByName("test").getRange(2, 1, 1, 1).setValue(fromInputForm);
收件人：
To:
ss.getSheetByName("test").getRange(2, 1, 1, 2).setValues([[fromInputForm.Class, fromInputForm.sample]]);
HTML：
有2种修改
HTML:
There are 2 modification parts.
<input type="submit" value="Submit" onclick="myFunction()">
收件人：
To:
<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（）
- withSuccessHandler()
Reference:
如果我误解了您的问题，而这不是您想要的结果，我深表歉意。
If I misunderstood your question and this was not the result you want, I apologize.
这篇关于如何创建一个包含下拉列表的HTML对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
