如何读取下拉列表的选定值以在第二个下拉列表中使用

Answer 1

修改点：

• 为了通过第一个下拉列表将值设置到第二个下拉列表，使用 JavaScript。
  • 在您的 HTML 中，第二个下拉列表是使用 JavaScript 使用第一个下拉列表的值创建的。
• 使用Google Apps Script 的HTML 模板时，使用evaluate() 方法运行计算时，处理成本变高。 Ref
• 在 HTML 模板的情况下，当加载 HTML 时，evaluate() 创建的 HTML 被放置为静态。因此，您的 HTML 中的 account 无法使用。我认为这是您当前问题的原因。

当这些点反映在你的脚本中时，下面的修改怎么样？我认为在这种情况下，有几种方法。

修改后的脚本：

HTML端：Page.html

<label>Account: </label>
<select id="account" name="account" onchange="sample(this)"><?!= firstOptions ?></select>

<label>property: </label>
<select id="view" name="view"><?!= secondOptions ?></select>

<input type="button" value="Close" onclick="google.script.host.close()" />

<script>    
const accounts = JSON.parse(<?= accounts ?>);

function sample(e) {
  const select = document.getElementById("view");
  select.length = 0;
  const { propertySummaries } = accounts[e.value];
  propertySummaries.forEach(({ displayName }, i) => {
    const option = document.createElement("option");
    option.text = displayName;
    option.value = i;
    select.appendChild(option);
  });
}
</script>

• 通过加载accounts的值，在加载HTML之后，就可以使用这个值了。

Google Apps 脚本端：Code.gs

function showSidebar() {
  const accounts = listAccounts();
  const html = HtmlService.createTemplateFromFile('Page');
  html.accounts = JSON.stringify(accounts);
  html.firstOptions = accounts.map(({ displayName }, i) => `<option value="${i}">${displayName}</option>`).join("");
  html.secondOptions = accounts[0].propertySummaries.map(({ displayName }, i) => `<option value="${i}">${displayName}</option>`).join("");
  SpreadsheetApp.getUi().showSidebar(html.evaluate());
}

• 在这种情况下，它假设 listAccounts() 返回如下值。

    [{
        "name": "accountSummaries/223471136",
        "account": "accounts/223471136",
        "displayName": "G4MeasurmentTesting",
        "propertySummaries": [
          {
            "property": "properties/307799514",
            "displayName": "Ga4CsharpTesting",
            "propertyType": "PROPERTY_TYPE_ORDINARY",
            "parent": "accounts/223471136"
          }
        ]
      },
      ,
      ,
      ,
    ]
  

• 当showSidebar() 运行时，您可以看到第一个下拉列表。当您更改第一个下拉列表时，会更改第二个下拉列表。

• 更新：我注意到第一次打开侧边栏时，未设置第二个下拉列表的初始值，而第一个下拉列表的初始值是第一个元素。为此，我更新了脚本。如果不需要将初始值设置为第二个下拉列表，请使用以前的版本。

笔记：

• 这是一个用于解释结果的简单示例脚本。所以，请根据您的实际情况进行修改。

参考：

• HTML Service: Templated HTML

添加：

对于Should I / can I place my listAccounts method in the page.html file along with the sample method you showed.，当您的listAccounts() 不包含Google Apps Script 的方法时，您可以使用以下示例脚本。

示例脚本：

HTML端：Page.html

<label>Account: </label>
<select id="account" name="account" onchange="sample(this)"></select>

<label>property: </label>
<select id="view" name="view"></select>

<input type="button" value="Close" onclick="google.script.host.close()" />

<script>

// Please set your value here.
function listAccounts() {
  return [{
      "name": "accountSummaries/223471136",
      "account": "accounts/223471136",
      "displayName": "G4MeasurmentTesting",
      "propertySummaries": [
        {
          "property": "properties/307799514",
          "displayName": "Ga4CsharpTesting",
          "propertyType": "PROPERTY_TYPE_ORDINARY",
          "parent": "accounts/223471136"
        }
      ]
    },
    ,
    ,
    ,
  ];
}

const accounts = listAccounts();

function sample(e) {
  const select = document.getElementById("view");
  select.length = 0;
  const {propertySummaries} = accounts[e.value];
  propertySummaries.forEach(({displayName}, i) => {
    const option = document.createElement("option");
    option.text = displayName;
    option.value = i;
    select.appendChild(option);
  });
}

// When HTML is opened, this function is run. And, the initial values are put to the 1st and 2nd dropdown list.
function init() {
  accounts.forEach(({displayName}, i) => {
    const option = document.createElement("option");
    option.text = displayName;
    option.value = i;
    account.appendChild(option);
  });
  accounts[0].propertySummaries.forEach(({displayName}, i) => {
    const option = document.createElement("option");
    option.text = displayName;
    option.value = i;
    view.appendChild(option);
  });
}

init();
</script>

• 在这种情况下，如果 Google Apps Script 的方法包含在 listAccounts() 中，则无法使用此脚本。因为 Google Apps 脚本无法使用客户端浏览器运行。请注意这一点。

Google Apps 脚本端：Code.gs

function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Page');
  SpreadsheetApp.getUi().showSidebar(html);
}

• 在这种情况下，在 Google Apps 脚本端，仅打开侧边栏。

Answer 2

我看到@Tanaike 打败了我，但正如我所承诺的那样，我提供了一个模型，说明如何通过模板化 HTML 以及使用 google.script.run 来做到这一点。

首先是 Code.gs 中的服务器端代码。我在模板和客户端<script> 中都使用listAccounts()。

然后我将展示如何修改 html 代码以包含事件处理程序。

代码.gs

function showTest() {
  var html = HtmlService.createTemplateFromFile("HTML_Test");
  html.accounts = listAccounts();
  SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Test");
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

// Mock up data
function listAccounts() {
  let accounts = [ {account: 11111, displayName: "name11111", propertySummaries: [ {displayName: "prop11111"}, {displayName: "prop11112"} ]}, 
                    {account: 22222, displayName: "name22222", propertySummaries: [ {displayName: "prop22222"}, {displayName: "prop22223"} ]},
                    {account: 33333, displayName: "name33333", propertySummaries: [ {displayName: "prop33333"}, {displayName: "prop33334"} ]}];
  return accounts;
}

HTML_Test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
    <label>Account: </label>
    <select id="account" name="account">
      <?  for (var i = 0; i < accounts.length; i++) { ?>
        <option value="<?= i ?>"><?= accounts[i].displayName ?></option>
      <? } ?>  
    </select>
    
    <label>property: </label>
    <select id="view" name="view">
    </select>    

    <input type="button" value="Close" onclick="google.script.host.close()" />
    <script>
      var accounts = null;
      function accountOnChange() {
        let i = document.getElementById("account").selectedIndex;
        let account = accounts[i];
        let select = document.getElementById("view");
        let options = select.options;
        for( i=options.length; i>0; i-- ) {
          options.remove(i-1);
        }
        account.propertySummaries.forEach( property => {
            let option = document.createElement("option");
            option.text = property.displayName;
            select.options.add(option);
          }
        );

      }
      (function() {
        try {
          document.getElementById("account").addEventListener("change",accountOnChange);
          google.script.run.withSuccessHandler(
            function(value) {
              accounts = value;
              let select = document.getElementById("view");
              accounts[0].propertySummaries.forEach( property => {
                  let option = document.createElement("option");
                  option.text = property.displayName;
                  select.options.add(option);
                }
              );
            }
          ).listAccounts();
        }
        catch(err) {
          alert(err);
        }
      })();
    </script>
  </body>
</html>