HTML select multiple doesn't return an array

multiple select dropdown with checkbox in html
multiple select box in html
how to select multiple options from a drop down list in html
how to use checkbox inside select option in html
multiple select dropdown bootstrap
multi select dropdown with checkbox bootstrap
html select multiple values javascript
multiselect dropdown with checkbox in html5

I got an issue with some code I wrote in google script. I'm using a (select-multiple) and I want to return the second option that is selected. And append this option in a google sheet. I looked it up and tried different solutions but those don't seem to work. This is the 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>

This is the 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>

And this is where i write it to the google sheet:

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

}

I'm able to write the first and last name of the user in the google sheet, but when implementing the multiple select, it won't do anything. Any tips are appreciated. Thanks

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

should be

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

For a multi-select, .val() returns an array of the selected values, so .val()[1] is a string. .value is a property of input elements, not strings.

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>

HTML select multiple Attribute, HTML <select> tag <select name="cars" id="cars" multiple> For windows: Hold down the control (ctrl) button to select multiple options; For Mac: are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. The multiple attribute is a boolean attribute. When present, it specifies that multiple options can be selected at once. Selecting multiple options vary in different operating systems and browsers: For windows: Hold down the control (ctrl) button to select multiple options; For Mac: Hold down the command button to select multiple options

Put the multi-select values into an array and then get the second index:

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

<select>, A radio button does not allow more than one selections and a checkbox, on the other hand, allows one or more than one selections. A user can select only one� The multiple attribute is a boolean attribute. When present, it specifies that the user is allowed to enter more than one value in the <input> element. Note: The multiple attribute works with the following input types: email, and file. Tip: For <input type="file">: to select multiple files, hold down the CTRL or SHIFT key while selecting.

You must call the .val() of <select> element itself to get the array of selected items.

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

How to create a select box with multiple selections, HTML; JavaScript. <div class="row"> <div class="col-md-12"> <select class="mdb -select colorful-select dropdown-primary md-form" multiple� On a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute: Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

Bootstrap Multiselect, Why doesn't this code show the arrow for the dropdown? Thanks! share. Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select.

HTML: Select multiple as dropdown, select multiple in HTML5 � javascript html forms. I'm new to HTML5 and I'm trying to test the <select> with� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

select multiple in HTML5, If the listbox element does not contain any options, aria-activedescendant does not The multi-select capability is communicated to assistive technologies by� A long reflecting the size HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4. HTMLSelectElement.type Read only A DOMString represeting the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".

Comments
  • You're already using jQuery, why are you using document.getElementById("btn").addEventListener("click", doStuff); instead of $('#btn').click(doStuff)? (and the same question for the code in that function. If you already have jQuery anyway, no need for the super verbose DOM API?)
  • Does this answer your question? How to get all selected values from <select multiple=multiple>?
  • Probably it is a good idea to also mention that val() in this case returns an array of selected values (which OP wants to get).
  • I thought it was obvious, but I reworded.
  • Thanks for the quick response, i tried it first without the '.value' but that didn't work neither. I'm selecting more than one value every time i try the code (but i get your comment)
  • I've added a demo showing that it works. Select Excel and Word, and it should log 3.
  • @Barmar, i solved it using the solution see below. thanks!