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。但是，它没有（而且显然不能）关闭对话框，也没有关闭原始的打开目录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

脚本逻辑：

change

select事件。您可以使用它将数据发送到服务器。
或者，您可以使用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>

OR

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

如何在Google脚本上下文中保存HTML下拉值？

html

更新

html

gs

更新2

修订版gs

1 个答案:

脚本逻辑：

摘要：