在 web 应用程序中单击按钮后刷新下拉列表

Question

我有一个带有一个下拉列表和 2 个按钮的 web 应用程序。 下拉列表从工作表中获取值。 按钮写回工作表中。 我的脚本可以正常工作：

 <script>
    $(function() {
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });
    function updateSelect(opt)
    {
      var select = document.getElementById("sel1");
  select.options.length = 0; 
  for(var i=0;i<opt.length;i++)
  {
    select.options[i] = new Option(opt[i],opt[i]);
  }
    }

function listS() {
  const selectElem = document.getElementById('sel1')
  const index = selectElem.selectedIndex;
  if (index > -1) {
    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("but1").addEventListener("click",listS);

function yourCallBack(response) {
}


</script>

在 Java 脚本中：

    function getSelectOptions()
    {
      var ss=SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
  var sh=ss.getSheetByName('Database');
  var rg=sh.getRange(2,1,sh.getLastRow()-1,8);
  var vA=rg.getValues();
  var useremail = Session.getActiveUser().getEmail();
  var opt=[];
  for(var i=0;i<vA.length;i++)
  {
    if(vA[i][1] == "Pending Approval"){

      if(vA[i][7]+"@xxx.com" == useremail || vA[i][7]+"@xxx.com" == useremail) {

      opt.push(vA[i][3]+" REQ ID: "+vA[i][0]);

      }

    }
  };

  if (opt.length == 0) {opt.push("You do not have pending requests")};

  return opt;
    }

function doGet() { 
  var output = HtmlService.createHtmlOutputFromFile('list');
  return output; 
}

    function yourServerSideFunc(body) {
     var value = body["value"];
  var ss = SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
  var sh = ss.getSheetByName('Database');
  var rg=sh.getRange(1,1,sh.getLastRow()-1,4);
  var vA=rg.getValues();
  var str = "Approved";

  for(var i=0;i<vA.length;i++)
  {
    if(vA[i][3]+" REQ ID: "+vA[i][0] == value) {

      sh.getRange(i+1, 2).setValue(str);

      }


  };

      return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);  

现在我试图在单击按钮后重新生成下拉列表值。 我试图添加

var output = HtmlService.createHtmlOutputFromFile('list');
      return output; 

在 yourServerSideFunc(body) function 中重新生成 HTML 但不起作用。 我试图强制进行 HTML 刷新，但也没有用。

如何轻松重新触发下拉列表项的生成？ 最坏的情况是刷新整个页面是可以的，但是重新生成下拉列表应该很简单，因为我已经有了它的代码。

Answer 1

我最终完成了这项工作。

function listS() {
  const selectElem = document.getElementById('sel1')
  const index = selectElem.selectedIndex;
  if (index > -1) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);

//ADDED:

var select = document.getElementById("sel1");
            select.options[index] = new Option("Approved! Please refresh","Approved! Please refresh");
            selectElem.selectedIndex = index;
      } 


    }

从工作表中刷新列表并没有真正达到最初的目标。 如果其他人发布了一个调用服务器 function 的解决方案，那就太好了。 我试图添加 google.script.run.doGet() 和类似的，但它似乎没有正确调用服务器端函数。