HTML选择多个不返回数组

Question

我在谷歌脚本中编写的一些代码有问题。我正在使用 (select-multiple) 并且我想返回选中的 second 选项。并将此选项附加到谷歌表中。我查了一下并尝试了不同的解决方案，但这些似乎不起作用。 这是html：

  <select id ="multipleSelect" multiple="multiple">   
    <option value="1">Google Sheets </option>
    <option value="2">Excel </option>
    <option value="3">Word </option>
    <option value="4">Acess </option>
    <option value="5">Docs  </option>
    <option value="6">Pwp </option>
  </select>

这是javascript：

<script>
document.getElementById("btn").addEventListener("click", doStuff);

function doStuff(){

    var userInfo = {};

    userInfo.firstName = document.getElementById("fn").value;
    userInfo.lastnName = document.getElementById("ln").value;
    userInfo.app = $('#multipleSelect').val()[1].value;

    google.script.run.userClicked(userInfo);

    document.getElementById("fn").value ="";
    document.getElementById("ln").value ="";

}
</script>

这是我写到谷歌表的地方：

function doGet(e) {

   return HtmlService.createTemplateFromFile("page").evaluate();
}

function userClicked(user){

    var url = "https://docs.google.com/spreadsheets/d/1L8QWNMDjoit8QILRCBYKply49FPjMVVRDyVhVET2fUA/edit#gid=0";

    var ss = SpreadsheetApp.openByUrl(url);

    var ws = ss.getSheetByName("Data");

    ws.appendRow([user.firstName, user.app, new Date()]);

}
function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

我可以在谷歌表格中写下用户的名字和姓氏，但是在实现多选时，它不会做任何事情。任何提示表示赞赏。谢谢

Answer 1

    userInfo.app = $('#multipleSelect').val()[1].value;

应该是

    userInfo.app = $('#multipleSelect').val()[1];

对于多选，.val() 返回所选值的数组，因此.val()[1] 是一个字符串。 .value 是输入元素的属性，而不是字符串。

document.getElementById("btn").addEventListener("click", doStuff);

function doStuff() {

  var userInfo = {};

  userInfo.app = $('#multipleSelect').val()[1];

  console.log(userInfo.app);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="multipleSelect" multiple="multiple">
  <option value="1">Google Sheets </option>
  <option value="2">Excel </option>
  <option value="3">Word </option>
  <option value="4">Acess </option>
  <option value="5">Docs </option>
  <option value="6">Pwp </option>
</select>

<button id="btn">Show second item</button>

您可能还应该有代码来检查他们是否选择了至少 2 个选项。

Answer 2

将多选值放入一个数组，然后得到第二个索引：

document.getElementById("btn").addEventListener("click", doStuff);

function doStuff(){

    var userInfo = {};

    userInfo.firstName = "Bob";
    userInfo.lastnName = "Loblaw";
    let arr = $('#multipleSelect').val();
    userInfo.app = arr.length > 1 ? arr[1] : null
    console.clear()
    console.log(userInfo)

    //google.script.run.userClicked(userInfo);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id ="multipleSelect" multiple="multiple">   
    <option value="1">Google Sheets </option>
    <option value="2">Excel </option>
    <option value="3">Word </option>
    <option value="4">Acess </option>
    <option value="5">Docs  </option>
    <option value="6">Pwp </option>
  </select>
<input id="btn" type="button" value="do stuff" />

Answer 3

您必须调用 <select> 元素本身的 .val() 才能获取所选项目的数组。

$(function() {
  function doStuff() {
    var userInfo = {
      firstName: $("#fn").val(),
      lastName: $("#ln").val(),
      app: $('#multipleSelect').val()
    };
    console.log(userInfo);
  }

  $("#btn").click(doStuff);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Name</strong><br /> Fisrt: <input id="fn" type="text" value="Thomas" /> Last: <input id="ln" type="text" value="Anderson" /><br />
<select id="multipleSelect" multiple="multiple">
  <option value="1">Google Sheets </option>
  <option value="2">Excel </option>
  <option value="3">Word </option>
  <option value="4">Acess </option>
  <option value="5">Docs </option>
  <option value="6">Pwp </option>
</select><br />
<button id="btn">Go</button>

当集合中的第一个元素是一个 select-multiple（即，具有多个属性集的 select 元素）时，.val() 返回一个包含每个选定选项值的数组。从 jQuery 3.0 开始，如果没有选择任何选项，则返回一个空数组 ([])；在 jQuery 3.0 之前，它返回 null。

查看更多：https://api.jquery.com/val/

这当然需要加载 jQuery。如果您使用 Google API，我建议您使用 jQuery 3.0 或更高版本。