如何在Google Apps Script中获取HTML对话框下拉框选中值

你的现有代码已经完成了下拉框填充工作表名称的功能，只需补充选中值提交到GAS函数的逻辑即可，具体修改步骤如下：

1. 修正something函数的参数命名 #

JavaScript/Google Apps Script中参数名不能使用连字符，先把returned-Value改成合法命名（比如returnedValue），再补充业务逻辑：

function something(returnedValue) {
  // 这里编写你的后续处理逻辑，例如打印日志、操作工作表等
  console.log("选中的工作表名称：" + returnedValue);
  SpreadsheetApp.getUi().alert("已选中工作表：" + returnedValue);
}

2. 修改HTML页面，添加提交按钮和值传递逻辑 #

在表单中添加提交按钮，绑定提交事件来获取选中值，再通过google.script.run调用GAS的something函数，成功提交后自动关闭对话框：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body onload="addList()">
  <form id="Form" onsubmit="handleSubmit(event)">
    <div>
      <label for="List">选择工作表：</label><br>
      <input list="dropdownList" name="list" id="selectedSheet" placeholder="请选择" required>
      <datalist id="dropdownList">
      </datalist>
    </div>
    <br>
    <button type="submit">确认提交</button>
  </form>

  <script>
    function addList() {
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(addListValues)
        .getList();
    }

    function addListValues(values) {
      var list = document.getElementById('dropdownList');   
      for (var i = 0; i < values.length; i++) {
        var option = document.createElement("option");
        option.value = values[i];
        list.appendChild(option);
      }
    }

    function handleSubmit(event) {
      // 阻止表单默认提交行为
      event.preventDefault();
      // 获取用户选中的工作表名称
      var selectedValue = document.getElementById('selectedSheet').value;
      // 调用GAS中的something函数传递值
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(function() {
          // 提交成功后关闭对话框
          google.script.host.close();
        })
        .something(selectedValue);
    }

    function onFailure(err) {
      alert('出错了！' + err.message);
    }
  </script>
</html>

3. 保留原有GAS函数 #

你的getDialog和getList函数无需修改，可继续使用：

function getDialog() {
 var html = HtmlService.createHtmlOutputFromFile('index')
     .setWidth(400)
     .setHeight(300);
 SpreadsheetApp.getUi().showModalDialog(html, '新建组件表单');
}

function getList() {
  var out = new Array()
  var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
  for (var i=0 ; i<sheets.length ; i++) {
    if (sheets[i].getName()!=="FullOptionLists" && sheets[i].getName()!=="sumAppHeaders" && sheets[i].getName()!=="RawData") {
       out.push(sheets[i].getName())
    }
  }
  return out; 
}

工作流程说明 #

1. 调用getDialog弹出对话框，页面加载时通过addList调用getList获取符合条件的工作表名称，填充到下拉框
2. 用户选中工作表后点击提交按钮，handleSubmit函数获取选中值，通过google.script.run传递给GAS的something函数
3. something函数接收到值后执行后续业务逻辑，成功提交后自动关闭对话框

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