如何從使用GoogleApps腳本部署的表單中排除已達到容量的選項-有解無憂

我使用具有容量選項的 Google Apps 腳本創建了一個網路表單。

在下面的示例中，有一個問題要求訪問者選擇芝士蛋糕或巧克力蛋糕。假設我只有兩塊芝士蛋糕和三塊巧克力蛋糕，如果兩個訪客已經??選擇了芝士蛋糕，我想從表單中洗掉芝士蛋糕的選項，使該選項不可見，因此無法選擇，顯示選項只有巧克力蛋糕。

那么，我應該如何select使用 Google Apps Script 來實作這樣一個選項具有容量的問題？

請注意，但我想創建一個自定義 Web 表單，而這一次我不為此目的使用 Google 表單。

編輯

以下鏈接將顯示此程式如何將資料保存在電子表格中：如何從使用 Google Apps 腳本部署的表單中排除已達到容量的選項

一個人每點一個蛋糕，數量就減少1。

如何從使用 Google Apps 腳本部署的表單中排除已達到容量的選項

當蛋糕的數量達到 0 時，腳本將從下拉串列中洗掉芝士蛋糕：

如何從使用 Google Apps 腳本部署的表單中排除已達到容量的選項

注意：您可以復制并粘貼上面的代碼，但您需要一個名為 Inventory 的作業表，其內容和格式與我上面的示例相同。

參考：

示例腳本

請將以下腳本復制并粘貼到腳本編輯器中。并且，請將最新的腳本反映到 Web Apps中。

Google Apps 腳本方面：`Code.gs`

var spreadsheetId = "###"; // Please set your Spreadsheet ID.

function updateValue(e) {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheets()[0];
  var range = sheet.getRange("A2:B"   sheet.getLastRow());
  var values = range.getValues().map(([a, b]) => a == e ? [a, --b] : [a, b]);
  range.setValues(values);
  return values.map(([a, b]) => `<option value="${a}" ${b == 0 ? "disabled" : ""}>${a}</option>`).join("");
}

const doGet = () => {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheets()[0];
  var [, ...values] = sheet.getDataRange().getValues();
  var v = values.map(([a, b]) => `<option value="${a}" ${b == 0 ? "disabled" : ""}>${a}</option>`).join("");
  var html = HtmlService.createTemplateFromFile("index.html");
  html.values = v || "";
  return html.evaluate();
}

HTML & Javascript 方面：`index.html`

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <form id="form">
    <div>
      <h1 id="Question">
        Choose either cheesecake or chocolate cake.
      </h1>

      <select id="sampleSelect" name="cake" class="form-control">
        <?!= values ?>
      </select>
    </div>

    <div class="form-submit">
      <input type="submit" value="Submit" onclick="saveValue(this);return false;">
    </div>
  </form>
  <script>
    function saveValue(e) {
      const v = document.getElementById("form").cake.value;
      google.script.run.withSuccessHandler(updated => {
        document.getElementById("sampleSelect").innerHTML = updated;
      }).updateValue(v);
    }
  </script>
</body>

</html>

測驗

請訪問修改后的腳本中反映的已部署 Web 應用程式。這樣，您可以看到下拉串列。

在此示例中，芝士蛋糕有 2 個。當您選擇一個芝士蛋糕并單擊“提交”按鈕時，電子表格上的芝士蛋糕數量變為 2 到 1。當您選擇芝士蛋糕并再次單擊按鈕時，您可以確認該選項無法選擇芝士蛋糕。

我認為這可能是您的預期結果。

筆記

當您修改 Google Apps 腳本時，請將部署修改為新版本。這樣，修改后的腳本就會反映在 Web Apps 中。請注意這一點。
您可以在“在不更改新 IDE 的 Web 應用程式 URL 的情況下重新部署 Web 應用程式”的報告中查看詳細資訊。
此示例腳本是一個簡單的腳本。所以，請根據您的實際情況進行修改。

參考

HTML 服務：模板化 HTML

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476454.html

標籤：html 形式谷歌应用脚本 html-选择选项

上一篇：跨多個輸入元素使用單個ref物件

下一篇：如果用戶沒有進行下拉選擇，我如何不在HTML電子郵件中包含“無”？

如何從使用GoogleApps腳本部署的表單中排除已達到容量的選項

編輯

參考：

示例腳本

Google Apps 腳本方面：Code.gs

HTML & Javascript 方面：index.html

測驗

筆記

參考

Google Apps 腳本方面：`Code.gs`

HTML & Javascript 方面：`index.html`