Google表格下拉菜单切换工作表功能失效问题求助

我想实现Google表格侧边栏的下拉菜单选择工作表名称后，自动跳转到对应工作表的功能。目前下拉菜单能正常显示所有工作表名称，但选择后无任何反应，按钮点击也没效果。以下是我的代码：

code.gs #

function onOpen() {
  createMenu()
}

function createMenu(){
  const ui = SpreadsheetApp.getUi()
  const menu = ui.createMenu("Sidebar")
  menu.addItem("Open Sidebar", "openSidebar");
  menu.addToUi()
}

function openSidebar() {
  ss = SpreadsheetApp.getActiveSpreadsheet();
  var html = HtmlService.createTemplateFromFile('sidebar')
  .evaluate()
  .setTitle('Salesforce')
  .setWidth(400);
  
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
  .showSidebar(html);
}

sidebar.html #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>

    <body>
    <button id = "moveButton" class="button alert">Move</button>
   
    <select name="Available sheets" onchange="moveSheet()" style="width:280px;height:30px;">
      <? var sheets=ss.getSheets(); ?>
      <? for(var i=0;i<sheets.length;i++) { ?>
        <option value=<?=sheets[i].getName()?>> <?= sheets[i].getName()?></option>
      <? } ?>
    </select>
  
  <script>
    function myJsFunction(){
      var name = document.getElementsByName("Available sheets")[0].value;
    }
    
    function moveSheet(){
      var ss = SpreadsheetApp.getActiveSpreadsheet();
      var sheet = ss.getSheetByName(name);
      
      if(sheet !=null){
        ss.moveActiveSheet(sheet);
        
      }else{
       //
      }
    } 
     
    document.getElementById("moveButton").addEventListener("click",moveSheet());
     //google.script.run.withSuccessHandler(name);
    };
  </script>
  </body>
</html>

错误分析与修复方案 #

1. 前端JS不能直接调用服务端API #

浏览器端的<script>代码无法直接执行SpreadsheetApp相关API，必须通过google.script.run调用服务端定义的函数来操作表格。

2. 变量作用域错误 #

moveSheet()函数中使用的name变量未定义，需要在函数内部获取下拉框的选中值。

3. 事件绑定写法错误 #

addEventListener中直接写moveSheet()会在页面加载时立即执行函数，而非点击按钮时触发，应该传递函数引用moveSheet（不带括号）。

4. 工作表跳转API使用错误 #

ss.moveActiveSheet(sheet)的作用是调整工作表的顺序，不是跳转到目标工作表，正确的跳转方法是调用sheet.activate()。

修改后的完整代码 #

修改后的code.gs #

function onOpen() {
  createMenu()
}

function createMenu(){
  const ui = SpreadsheetApp.getUi()
  const menu = ui.createMenu("Sidebar")
  menu.addItem("Open Sidebar", "openSidebar");
  menu.addToUi()
}

function openSidebar() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const html = HtmlService.createTemplateFromFile('sidebar')
    .evaluate()
    .setTitle('Salesforce')
    .setWidth(400);
  
  SpreadsheetApp.getUi().showSidebar(html);
}

// 新增服务端函数：激活指定工作表
function activateSheet(sheetName) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(sheetName);
  if (sheet) {
    sheet.activate();
  }
}

修改后的sidebar.html #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button id="moveButton" class="button alert">Move</button>
   
    <select name="Available sheets" onchange="moveSheet()" style="width:280px;height:30px;">
      <? var sheets=ss.getSheets(); ?>
      <? for(var i=0;i<sheets.length;i++) { ?>
        <option value="<?=sheets[i].getName()?>"><?= sheets[i].getName()?></option>
      <? } ?>
    </select>
  
  <script>
    function moveSheet(){
      // 获取下拉框选中的工作表名称
      const sheetName = document.getElementsByName("Available sheets")[0].value;
      // 调用服务端函数激活目标工作表
      google.script.run.activateSheet(sheetName);
    } 
     
    // 修正按钮点击事件绑定
    document.getElementById("moveButton").addEventListener("click", moveSheet);
  </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者whytili