javascript - 如何使用 Javascript 获取多个选定项的列表并将它们的值输出为数组

Question

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

目前，我已经设法在仅选择一个列表项时返回单个值。 引用: example 1

但如果我选择多个，则什么也不会发生。引用:example 2

本质上，我想要完成的是:

如果... Bill 和 Mary] ... 从列表中选择，则他们相应的年龄输出为 ... {33,44}。 或者，如果...[Bill、Mary 和 Joe] ...被选中，则结果为 {33,44,21}。

数据是从一张包含 2 列(“员工”和“年龄”)的工作表中提取的。该列表也是动态无限的。

如果我的请求令人困惑，this resource清楚地展示了我正在努力实现的目标，但我似乎无法破解它。

希望这个高级社区可以帮助我解决这个挑战。

现在，这是供引用的 Code.gs 和 Javascript。

(注意:我只是在寻找 Javascript 解决方案。另外，请原谅我对这篇处女帖的格式设置。)

代码.gs

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';
      }  
}

Javascript

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;  
}

HTML

<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>

Answer 1

问题:

• HTMLSelectElement.value 只返回第一个选择的值。

解决方案:

• 使用HTMLSelectElement.selectedOptions 获取所有选中的HTMLOptionElement 值

片段#1:

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

然后您应该修改您的 getAges server function to work with a array argument instead of a single value .或者，您应该将整个数据作为二维数组传递给客户端，使用 Map 获取 age:

片段#2:

服务器端:

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;  
}

引用资料:

• > HTMLSelectElement § Properties
• > Global object Map