根据用户在谷歌网站（Web应用）中的选择更改谷歌工作表数据

Question

我正在制作一个谷歌网站，它显示了基于来自谷歌表的数据的下拉。它工作。

作为下一步，我希望当用户从列表中选择一个下拉选项时，所选的值将写入Google Sheet单元格（在下面的示例中，所选的值将写入Sheet:“Dashboard”，单元格：B92）。

例如，假设下拉列表具有来自工作表的以下值：“项目1”、“项目2”、“项目3”。

当用户从网站上选择“item1”时，脚本应该在googlesheet单元格B92中写入“item1”。类似地，如果用户选择“项目2”，脚本将在单元格B92中设置“项目2”。

我尝试使用下面的代码，但我认为有问题：

• 获取HTML文件

（我删除了整个代码，以关注不正确的部分。如果需要，我可以把它加回来）

function doPost(e) {
          var ss=SpreadsheetApp.openById('XXXXXXXX');
          var sh=ss.getSheetByName('Dashboard');
          sh.getRange(92,2).setValues(e.parameter);

        }

HTML文件：

<script type="text/javascript">
      var lastIndex = "";
      const url = "https://script.google.com/a/google.com/macros/s/AKfycbxHX7cthji076OrqfY9ZpGa7jNDxKHUMf_ib7Ekmoo0Ir5DQF1Y/exec";
    function listQ(){
        var e = document.getElementById("sel1");
        if(e.selectedIndex > 0){
                lastIndex = e.selectedIndex;
                console.log(lastIndex);
                fetch(url, {
                    method: "POST"
                    , body: lastIndex
                }).then(function (response) {
                    return response.json()
                }).then(function (data) {
                    console.log(data);            
            })
         }
    }

document.getElementById("sel1").addEventListener("click",listQ);

Answer 1

除了塔奈克的回答，我还用谷歌发布了一个替代方案。剧本运行可避免某些用户可能遇到的CORS问题。

完整的解释如下：CORS block:WebApp POST to Sheet

在gs文件中：

function yourServerSideFunc(body) {
  var value = body["value"];
  var ss = SpreadsheetApp.openById('1ROvDcIQ9JCGxzLvCvTKIqSor576Uj9ZJv-n6hQ762XB');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);  
}

用超文本标记语言：

function listQ() {
  const index = this.selectedIndex;
  if (index > 0) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
  }
}
document.getElementById("sel1").addEventListener("change",listQ);

function yourCallBack(response) {
}

Answer 2

我相信你的目标如下。

• 您希望将HTML中select选项卡上的选定值放入工作表仪表板中的单元格“B92”

对于这个，这个答案怎么样？

• 在谷歌应用程序脚本端，

• lastIndex返回。在的情况下，当用户从网站中选择“item1”时，脚本应该在googlesheet单元格B92中写入“item1”。类似地，如果用户选择“项目2”，脚本将在单元格B92中设置“项目2” ，需要检索并返回所选值

当上述修改反映到脚本中时，它将变成如下所示。

function doPost(e) {
  var value = JSON.parse(e.postData.contents).value;
  var ss = SpreadsheetApp.openById('XXXXXXXX');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

从你的问题来看，我无法理解你的选择。因此，我使用了如下示例选项。请根据您的实际情况更换此。

<select id="sel1">
  <option value="sample1">sample1</option>
  <option value="sample2">sample2</option>
  <option value="sample3">sample3</option>
</select>


<script>
  function listQ() {
    const index = this.selectedIndex;
    if (index > 0) {
      const e = document.getElementById("sel1");
      const value = e.options[index].value;
      const url = "https://script.google.com/macros/s/###/exec";  // Please replace this for your Web Apps.
      fetch(url, {
        method: "POST",
        body: JSON.stringify({index: index, value: value}),
      })
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data);
      })
    }
  } 

  document.getElementById("sel1").addEventListener("change", listQ);
</script>

• 在此修改中，当选择sample2和sample3选项时，该值被发送到Web Apps。然后，在Web应用程序中，检索到的值被放入单元格B92。

• 当您修改Web应用的脚本时，请将其重新部署为新版本。这样，最新的脚本就会反映到Web应用程序中。请小心这个

• Web应用
• 利用Web应用程序与谷歌应用程序脚本