如何使用Javascript获取多个选定项的列表并将其值作为数组输出

我在自学如何编码。我的第一个项目是使用Apps脚本的webApp。除了一件事之外，我已经设法自己完成了大部分工作。。。我似乎无法将多个选择框中的项目输出到逗号分隔的值数组中

目前，我已设法在仅选择一个列表项时返回单个值。参考：

但如果我选择了不止一个，什么都不会发生。参考：

基本上，我想实现的是：

如果。。。比尔和玛丽]。。。从列表中选择，其相应的年龄输出为。。。{33,44}. 或者如果。。。[比尔、玛丽和乔]…被选中，结果是{33,44,21}

数据来自一张包含两列“Staff”和“Ages”的单页。列表也是动态无限的

万一我的要求令人困惑，我会清楚地说明我想要达到的目标，但我似乎无法破解它

希望这个先进的社区能帮助我解决这个挑战

现在，这里有Code.gs和Javascript供参考

注意：我正在寻找一个Javascript解决方案。另外，请原谅我对这篇处女文章的格式设置

代码.gs

HTML

问题: HTMLSelectElement.value仅返回第一个选定的值。 解决方案： 使用HTMLSelectElement.selectedOptions获取所有选定的HTMLOptionElement值 第1段： 然后，您应该修改您的。或者，您应该将整个数据作为2D数组传递给客户端，使用Map获取年龄：

第2段： 服务器端：

客户端：

参考资料：

---

你也可以发布你的HTML代码吗？嘿@Addis，我已经按照要求添加了HTML代码。嗨@cooper，我在搜索中遇到了这个问题。我向你们保证，你们可能会发现更多看起来是重复的。事实上，当我以非会员身份浏览这个论坛时，我至少保存了8篇帖子。加入论坛并寻求帮助是我绝对的第二次到最后的手段。最后一个选择是付钱给某人，让他们花时间教我一些东西，这对于这个社区的大多数高级成员来说可能是一个简单的解决方案。但如果我到了那里，我会过桥的。你的doGet函数？谢谢你的回答。首先，我在问题中加入了doGet函数。其次，我使用备选代码段2实现了您的响应。然而，它似乎没有返回{ages}。输出看起来像。“我肯定我错过了什么。”汉斯说​非常感谢@TheMaster。现在一切都很好！

function doGet(e){
  var ss = SpreadsheetApp.openById(ssID);
  var ws = ss.getSheetByName("Values");
  var posts = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();
  var postListArray = posts.map(function(r){ return '<option>' + r[0] + '</option>'; }).join('');
  var tmp = HtmlService.createTemplateFromFile("page");
    tmp.posts = postListArray;
      return tmp.evaluate();
}

function getAges(uStaff){
  var ss = SpreadsheetApp.openById(ssID);
  var ws = ss.getSheetByName("Values");
  var data = ws.getRange(1, 1, ws.getLastRow(), 2).getValues();
  var staffList = data.map(function(r){ return r[0]; });
  var agesList = data.map(function(r){ return r[1]; }); 
  var position = staffList.indexOf(uStaff);  
      if(position > -1){
          return agesList[position];
        } else {
          return 'Invalid';
      }  
}

document.getElementById("staff").addEventListener("change",getRecs);

function getRecs(){
  var uStaff = document.getElementById("staff").value;
    google.script.run.withSuccessHandler(updateAges).getAges(uStaff);    
}

function updateAges(ages){
  document.getElementById("age").value = ages;  
}

<div class="row">
    <div class="input-field col s6">
      <select id="staff" multiple>
        <?!= posts; ?>
      </select>
      <label for="staff" style="font-size: 20px;">Staff</label>
    </div>
    <div class="input-field col s6">
      <input type="text" id="age" class="validate" disabled>
    </div>
</div>

var uStaff = [...(document.getElementById("staff").selectedOptions)]
                        .map(e=>e.value);//uStaff is a array of staffs. eg ['Bill', 'Mary']

function getData(){
  var ss = SpreadsheetApp.openById(ssID);
  var ws = ss.getSheetByName("Values");
  var data = ws.getRange(1, 1, ws.getLastRow(), 2).getValues();
  return data;
}

document.getElementById("staff").addEventListener("change",getRecs);
var map = null;
function getRecs(){
  if(!map) {//call server if data is not retrieved previously
    google.script.run.withSuccessHandler(updateAges).getData()
  } else {updateAges()};    
}
function updateAges(arr){
  if(!map) map = new Map(arr);//map of [[staffs,ages]]
  let uStaff = document.getElementById("staff").selectedOptions;
  let ages = [...uStaff].map(staff=>map.get(staff.value)).join();
  document.getElementById("age").value = ages;  
}