Get MultiSelect Option values using google app script

Question

I have a list in google sheet to be selected as option in an html. The selection was set to multiple. How can I get the selected values be placed in a single cell in google sheet?

here is the link for the google sheet:

https://docs.google.com/spreadsheets/d/1lEfzjG1zzJVPMN8r-OpeZm6q9_IqSwk9DNCEY-q7ozY/edit?usp=sharing

here is my html code for multiple:

   <div class="input-field col s4">
   <select id="posApp" multiple="multiple">
   <option value="" disabled>Choose your preferred app</option>
   <?!= list2; ?> 
   </select>
   <label>Select App</label>
   </div> <!-- CLOSE TIME FIELD -->
   </div> <!-- CLOSE ROW -->

for google script (to make a selection list from google sheet):

function doGet(e){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws2 = ss.getSheetByName("Pos_App");
  var list2 = ws2.getRange(1,1,ws2.getRange("A1").getDataRegion().getLastRow(),1).getValues();
  var htmlListArray2 = list2.map(function(r){return '<option>' + r[0] + '</option>'; }).join('');

  var tmp = HtmlService.createTemplateFromFile("page");
  tmp.list2 = htmlListArray2;
  return tmp.evaluate();

}

for javascript using initialization of Select from Materialize CSS and the code from @Cooper:

<script>
     document.addEventListener('DOMContentLoaded', function() {
       var timeSelect = document.querySelectorAll('select');
       M.FormSelect.init(timeSelect);

     document.getElementById("posApp").addEventListener("change",selectMulti);     



   function selectMulti(){
   google.script.run.withSuccessHandler(updateSelect).getSelectOptions();

   }

   function updateSelect(vA){
    var select = document.getElementById("posapp"); 
    for(var i=0;i<vA.length;i++)
    {
    select.options[i] = new Option(vA[i],vA[i]);
    }
   }

     });
</script>

then additional function in google script also from @Cooper:

function getSelectOptions()
{
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Open_Pos");
  var posRg = ws.getRange(1, 1, ws.getLastRow(), 1).getValues().join().split(",");
  //return rg.getValue().split(',');
  return posRg;
}

But unfortunately, it is still unsuccessful. Though the output in the HTML are all the selected data, when I click the submit button, only the 1st item in the selection were saved in the google sheet. I also don't know how to use .getSelectedValues(); from MaterializeCSS. Thank you in advance your your help.

Could you please share your code to know what you have attempted? otherwise it's hard to tell how to help you. — AMolina
my apologies, i am new here so i cant post the codes properly like the other posts. — Glenn Perey
It's alright, you can edit your question, paste the code, select it and then hit the {} button in the editor, it will put it in the right format for you — AMolina

Cooper Cooper · Accepted Answer · 2019-07-09T15:31:21

Try this:

html:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <select id="posApp" multiple="multiple"> <option value="" disabled>Choose your Position</option>

code.gs

function getSelectOptions()
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Options');
  var rg=sh.getRange('A1');
  return rg.getValue().split(',');
}

javascript

function updateSelect(vA){
  var select = document.getElementById("posapp"); 
  for(var i=0;i<vA.length;i++)
  {
    select.options[i] = new Option(vA[i],vA[i]);
  }
}

$(function() {
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });

Get MultiSelect Option values using google app script

1 Answers