成功操作后更新侧边栏中的应用程序脚本下拉列表

Question

我正在逐步学习足够的 HTML 和 javascript 知识，以应用于我正在开发的供个人使用的 google 表格包。我在上一篇文章的帮助下开发了一个脚本，但遇到了一些问题。

本质上，我有一个 HTML 脚本，可以打开侧边栏并从工作表中的某个范围加载列表。

这是从列返回项目的脚本：

function getAllCategories() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  return sheet.getRange("F12:F").getValues();
}

HTML 脚本本身在这里：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" /> 
      <style> 
        .narrow
        {
          margin-bottom: 0.5rem;
        }
      </style>
      <script>
        function SubmitRecord() 
        {
          document.getElementById("displayReturn").innerHTML = ""; 
          let category  = document.getElementById("category").value;
          google.script.run.withSuccessHandler(returnBack)
          .deleteCategory(category);
        }

        function returnBack(stringBack)
        {
          document.getElementById("displayReturn").innerHTML = stringBack;
          document.getElementById("category").value = '';
        }

        function GetCategories()
        {
          google.script.run.withSuccessHandler((categories) => 
          {
            let category = document.getElementById("category");
            categories.forEach((element, index) => 
            {
              let opt       = document.createElement("option");
              opt.value     = element;
              opt.innerHTML = element;
              category.appendChild(opt);
            });

          }).getAllCategories();
        }
      </script>
  </head>

  <body>
    <form>
      <div style="padding: 10px" > 
        <div class="form-row" >
          <div class="form-group col-md-6 narrow">
            <label for="category" style="margin-bottom: 0rem" >Category</label>
            <select id="category" class="form-control" >
              <option selected disabled value="">---Select Category to Delete---</option>
            </select>
          </div> 
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <input type="button" value="Delete" onclick="SubmitRecord();GetCategories();" class="btn btn-primary"/>
          </div> 
        </div>

        <div id="displayReturn"></div>
      </div>
    </form>
    <script>GetCategories(); </script>
  </body>
</html>

HTML 脚本是从

onOpen(e)

触发器调用的。执行操作的脚本（在本例中为删除

deleteCategory(category)

）通过从范围（在本例中为 F12:F）中删除类别来工作。该类别是从侧边栏中的下拉列表中选择的。我想要发生的是，一旦删除类别，我希望立即更新下拉列表，而不必关闭侧边栏并重新打开它。我尝试了多种方法均无济于事。上面发布的当前 HTML 代码尝试将

GetCategories()

添加到

<input><\input>

标签，该标签已经具有另一个功能

SubmitRecord()

。我读到，可以将多个函数绑定到单击事件，尽管不鼓励这样做。那不起作用。我还尝试在

returnBack()

中发布以下代码：

let cat       = document.getElementById("category");
let opt       = document.createElement("option");
opt.value     = category;
opt.innerHTML = category;
cat.removeChild(opt);

这也行不通。

Answer 1

在你的 gs 代码中尝试这个

function getAllCategories() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  return sheet.getRange("F12:F" + sheet.getLastRow()).getValues().flat();
}

成功操作后更新侧边栏中的应用程序脚本下拉列表

问题描述投票：0回答：1

1个回答

最新问题

成功操作后更新侧边栏中的应用程序脚本下拉列表

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1