Google Sheet侧边栏联动下拉框：如何根据账户选择加载属性

问题原因 #

你之前的代码尝试用服务器端脚本生成属性下拉框，但服务器端脚本仅在页面加载时运行一次，无法响应客户端的下拉选择事件。另外，document对象是客户端浏览器的API，在服务器端脚本中不可用，这也是你遇到ReferenceError: document is not defined的原因。

修正方案 #

使用客户端JavaScript处理下拉框的联动逻辑，核心思路是：将账户数据传递到客户端，监听账户下拉框的选择事件，动态更新属性下拉框的选项。

修正后的HTML模板代码 #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body { padding: 10px; }
    label { display: inline-block; width: 80px; margin-bottom: 10px; }
    select { width: 200px; margin-bottom: 10px; }
  </style>
</head>
<body>
  <? var accounts = listAccounts(); ?>
  
  <label>Account:</label>
  <select id="account" name="account" onchange="updateProperties()">
    <option value="">Select an account</option>
    <? for (var i = 0; i < accounts.length; i++) { ?>
      <option value="<?= i ?>"><?= accounts[i].displayName ?></option>
    <? } ?>
  </select>
  
  <br>
  
  <label>Property:</label>
  <select id="view" name="view">
    <option value="">Select an account first</option>
  </select>
  
  <br><br>
  <input type="button" value="Close" onclick="google.script.host.close()" />

  <script>
    // 将服务器端账户数据传递到客户端
    const accounts = <?= JSON.stringify(accounts) ?>;
    
    function updateProperties() {
      const accountSelect = document.getElementById('account');
      const propertySelect = document.getElementById('view');
      const selectedIndex = accountSelect.value;
      
      // 清空现有属性选项
      propertySelect.innerHTML = '<option value="">Select a property</option>';
      
      if (selectedIndex !== "") {
        const selectedAccount = accounts[selectedIndex];
        // 遍历选中账户的属性，生成新选项
        selectedAccount.propertySummaries.forEach(property => {
          const option = document.createElement('option');
          option.value = property.property;
          option.textContent = property.displayName;
          propertySelect.appendChild(option);
        });
      }
    }
  </script>
</body>
</html>

关键说明 #

• 数据传递：通过JSON.stringify(accounts)将服务器端的账户数组转换为JSON字符串，在客户端解析为可操作的JavaScript对象。
• 事件触发：账户下拉框的onchange事件会在用户切换选择时自动调用updateProperties函数。
• 动态更新：每次选择账户后，先清空属性下拉框，再根据选中账户的propertySummaries生成对应的属性选项。

内容的提问来源于stack exchange，提问作者Linda Lawton - DaImTo