如何在 Google Script 上下文中保存 HTML 下拉列表值？

Question

我在 html 页面中有一个下拉菜单。我不知道如何编码的是如何保存用户选择的菜单选项，以便可以将其移动到 gs 文件中。

我浏览了 SO 网站的代码，但我似乎找到的只是涉及 javascript、php 等的答案（例如Change Link with HTML Dropdown 和 Fill HTML dropdown box with external JSON file data）。

我正在尝试构建的测试代码如下：

html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<select id="Instrument">
       <option>1</option>
       <option>2</option>
       <option>3</option>
    </select>

<!--Need code here to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->

  </body>
</html>

我希望能够“保存”该选项并将其传递给 Google 脚本，以便在那里对其进行进一步操作。

例如，如果我只是处理输入字段，而不是下拉列表中的数据，我会这样写：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <input id="idNewSongTitle" type="text" placeholder="Song Title"><br><br>
    <input id="idNewSongWriters" type="text" placeholder="Song Writers">*<br><br>
    <button onclick="saveUserInput()">Create New Lyric Doc</button></center><br><br>
    <script>
      window.saveUserInput = function() {
        var docName = document.getElementById('idNewSongTitle').value;
        var songTitle = document.getElementById('idNewSongTitle').value;
        var songWriters = document.getElementById('idNewSongWriters').value;
        console.log('songTitle: ' + songTitle)
        google.script.run       
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeLyric({docName:docName,songTitle:songTitle, songWriters: songWriters})
      }
       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

更新

好的。谢谢@TheMaster。现在我们正在做饭！

我使用了您的第二个建议并将其放入我正在使用的真实世界版本中，如下所示：

html

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="InstrNum" name="Instrument Number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select><br><br>
<button onclick="saveUserInput()">Continue</button><br><br>
    
<script>
   window.saveUserInput = function() {
   var instrNum = document.getElementById('InstrNum').value;
   console.log('instrNum: ' + instrNum)
        google.script.run       
           .withSuccessHandler(openCatalog)
           .insertInfo({instrNum:instrNum})
          
   function openCatalog(results){
           window.open(results.url, '_blank').focus();
       }
}
</script>
  </body>
</html>

gs

function onCheck(e) {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell().getColumn();
    var col = ss.getRange('Perform').getColumn(); 
        if (cell == col){
    var html = HtmlService.createHtmlOutputFromFile('index')
      .setWidth(400)
      .setHeight(300);
    SpreadsheetApp.getUi()
      .showModalDialog(html, 'Performance Information');
}
   }
function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);

}

它完全符合我的预期，除了两个问题。 （即，当我查看 SS 时，下拉菜单选项中的值已输入到目标单元格中​​。）

我需要发生的两件事是：

• 单击“继续”按钮时对话框没有关闭。
• 目录 SS 未打开。

对此有什么想法吗？

更新 2

正如@TheMaster 所说，我上面的问题是不相关的。我查看了一些类似的代码，并意识到我忘记了 return 语句。因此，我将其添加如下，它解决了一个问题：打开了一个新的 Catalog SS。但是，它并没有（而且显然不能）关闭对话框，也没有关闭原来打开的 Catalog SS 页面。

修改后的 gs

function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var url = ss.getUrl()
    Logger.log(url)
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);
    return {
        url: url
  };

本次直播到此结束。

Answer 1

脚本逻辑：

• 每次在select 中更改和提交选项时都会触发change 事件。您可以使用它向服务器发送数据。
• 或者，您可以使用 saveUserInput 函数获取select 的值。如果您想强制执行某种数据验证，请改用<form>。

片段：

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="Instrument" name="InstrumentSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<!--Code to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->
<script>
  handleOptionChange = function(e) {
    console.info(e.target.value);
    google.script.run.optionChanged(e.target.value);
  };
  document
    .getElementById('Instrument')
    .addEventListener('change', handleOptionChange);
</script>
  </body>
</html>

---

或

var instrument = document.getElementById('Instrument').value;