HTML выбор нескольких не возвращает массив

Question

У меня проблема с кодом, который я написал в скрипте Google. Я использую (выберите несколько), и я хочу вернуть второй вариант, который выбран. И добавить эту опцию в листе Google. Я искал и пробовал разные решения, но они, похоже, не работают. Это 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>

И вот где я пишу это на листе Google:

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();

}

Я могу записать имя и фамилию пользователя в листе Google, но при реализации множественного выбора он ничего не сделает. Любые советы приветствуются. Спасибо

Answer 1

Поместите значения множественного выбора в массив, а затем получите второй индекс:

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 2

Вы должны вызвать сам элемент .val() из <select>, чтобы получить массив выбранных элементов.

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

Когда первый элемент в коллекции является множественным выбором (т. Е. Элементом выбора с установленным атрибутом множественного числа), .val() возвращает массив, содержащий значение каждого выбранного параметра. Начиная с jQuery 3.0 , если никакие опции не выбраны, возвращается пустой массив ([]); до jQuery 3.0 возвращается null.

См. подробнее: https://api.jquery.com/val/

Это, конечно, требует jQuery для загрузки. С вашим использованием Google API я бы посоветовал jQuery 3.0 или выше.

Answer 3

    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 варианта.