Solution 1 :

welcome to the SO community.

I believe the problem is not in the Apps Script.

When you use Materialize Select you need to re-init it.

This is the function I found in my codebase, it should help you:

function fillMaterializeSelect(elSelect, data) {

    elSelect.options.length = 0;

    for (let i = 0; i < data.length; i++) {

      const dataElement = data[i];

      const option = document.createElement("option");
      option.value = dataElement.value;
      option.text = dataElement.text;




Solution 2 :

Here is a JavaScript function I use a lot for updating <select>.

function updateSelect(vA,id){
    var id=id || 'sel1';
    var select = document.getElementById(id);
    select.options.length = 0; 
    for(var i=1;i<vA.length;i++)
      select.options[i] = new Option(vA[i],vA[i]);//one is the value and the other is the display value

You retrieve the data with a

Problem :

This is my first time posting here so please let me know if I need to edit anything.

I am working on a program that runs through data that is imported in google sheets, displays one “row” of data in an HTML web app where the user can then assign an account number (found in a dropdown list) to the item that is displayed, and move on to the next row in the data. Each item in the data has a ID number and based on this ID number and the description of the data, the user selects the appropriate account number in the list to assign to the data.

The problem is that there are hundreds of these account numbers and having the users scroll/search through these to find the correct account will be very tedious.

The good news is that only certain accounts can be assigned to an ID number. I can effectively sort the dropdown list to only show accounts that can be assigned to the current ID therefore making the user’s job much easier and much quicker.

However, I have no idea how to update the dropdown after the item loads on the html page. I am able to get the current ID number and sort through the accounts, I just am not able to update the drop down.

I have pasted the and the html/javascript code.
I did not include all of the code in file as some of it has nothing to do with my problem.

I am using Materialize CSS.

var url = "hidden";

var ss = SpreadsheetApp.openByUrl(url);
var masterWS = ss.getSheetByName("Master List");

var items = [];

var Route = {};

Route.path = function (route, callback){
  Route[route] = callback;

function doGet(e) {

  Route.path("summary", summaryPage);
  Route.path("edit", editPage);

    return Route[e.parameters.v]();
  } else {
    return editPage();



function summaryPage(){
  var tmp =  HtmlService.createTemplateFromFile("summary");

  var sumList = showSummary();

  tmp.summaryList = sumList;

  return tmp.evaluate();

function include(fileName){
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();

function editPage(){

  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("GLAccounts");
  // Create drop down and populate with all account options
  var SSassetList = ws.getRange(2,1, getLastRowSpecial("A", "GLAccounts"),1).getValues();
  var htmlAssetList = (r){return '<option>' + r[0] + '</option>';}).join('');

  var tmp = HtmlService.createTemplateFromFile("page");

  tmp.assetList = htmlAssetList;
  return tmp.evaluate();


function calculateTotalEntries(){

  //Logger.log("Done: " + done);
  var lastRow = masterWS.getLastRow();
  var totalEntries = 0;
  var i = lastRow;
  while (masterWS.getRange(i, 1).getValue() != "Transaction Date"){



function userClicked(userInfo){

  var r = masterWS.getRange("P1").getValue();
  var GLAccount = userInfo.act;

  var lastRow = masterWS.getRange("R2").getValue();
  var totalEntries = masterWS.getRange("R1").getValue();

    //Logger.log("Done parsing. Items length: " + items.length);
    if(r <= totalEntries - 1 ){
      masterWS.getRange("P4").setValue(lastRow - totalEntries + 1 + r);
      if(masterWS.getRange("P1").getValue() != 0){
        masterWS.getRange(lastRow - totalEntries + r, 8).setValue(GLAccount);
      r = r + 1;
    } else {
      //Logger.log("Last one"); 
      masterWS.getRange(lastRow, 8).setValue(GLAccount);
      //return Error;

function showItem(){
  var row = masterWS.getRange("P4").getValue();
  return "Item: " + masterWS.getRange(row,5).getValue() + "; Date: " + slice(masterWS.getRange(row,1).getValue(), 13) + "; ID: "+ masterWS.getRange(row,6).getValue();

function getData(){
  var row = masterWS.getRange("P4").getValue();
  var id = "";
  id = masterWS.getRange(row,6).getValue().toString();
  var availAccounts = [];

  var IDSheet = ss.getSheetByName("MerchantCodes");
  var lastIDRow = IDSheet.getLastRow();

  var lastIDCol = 0;

  var currentRow = 0;

  for(var i = 6; i < lastIDRow; i++){
    if(IDSheet.getRange(i, 1).getValue().toString() == id){
      currentRow = i;

  //Logger.log("ID: " + id + " @ row " + i);
  for( var j = 1; j < 10; j++){
    if(IDSheet.getRange(currentRow,j).getValue() != ""){
      lastIDCol = j;
  //Logger.log("Last Column for row  " + i + ": " + lastIDCol);
  for(var r = lastIDCol - (lastIDCol - 3) + 1; r < lastIDCol+1; r++){
    //Logger.log("Account: " + IDSheet.getRange(currentRow,r).getValue());

  return availAccounts;


function resetCounters(){

function getLastRowSpecial(col, sheetName){
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName(sheetName);
  var data = ws.getRange(col + "2:" + col).getValues();
  var lastRowData = data.filter(String).length;

  return lastRowData;


The item that is displayed in the web app, which changes based on the data, is in the tags.
The dropdown list is populated using the tags. The data in those tags comes from the doGet()and editPage() functions in the file.

<!DOCTYPE html>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="">
    <?!= include("page-css"); ?>

  <div class = "container">  <!-- Open container -->

    <div> <!-- Open row -->
      <p><span id="current"></span></p>
    </div> <!-- Close row -->

    <div class ="row"> <!-- Open row -->

      <button id="btn2" class="btn waves-effect waves-light red darken-3" type="submit" name="action">Start</button> 

    </div> <!-- Close row -->

    <div class ="row"> <!-- Open row -->

      <div class="input-field col s6">
        <select id="glAcc">
          <option disabled selected>Choose your GL Account</option>

            <?!= assetList; ?>
        <label>GL Account</label>

    </div> <!-- Close row -->
    <div class ="row"> <!-- Open row -->

    <button id="updDrop" class="btn waves-effect waves-light red darken-3" type="submit"            name="action">Update Dropdown
        <i class="material-icons right">send</i>

    </div> <!-- Close row -->

    <div class ="row"> <!-- Open row -->

      <button id="btn" class="btn waves-effect waves-light red darken-3" type="submit" name="action">Submit
        <i class="material-icons right">send</i>

    </div> <!-- Close row -->

    <div class ="row"> <!-- Open row -->

      <a href="<?= ScriptApp.getService().getUrl(); ?>?v=summary" id="summary" class="btn waves-effect waves-light red darken-3" type="submit" name="action">Go to Summary Page
        <i class="material-icons right">arrow_forward</i>

    </div> <!-- Close row -->

  </div> <!-- Close container -->

    <script src=""></script>
    <?!= include("page-js"); ?>




document.addEventListener('DOMContentLoaded', function(){
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
document.addEventListener('DOMContentLoaded', reset);

document.getElementById("sumBtn").addEventListener("click", summary);
document.getElementById("updDrop").addEventListener("click", updateDropdown);

function doStuff(){

  var userInfo = {};
  userInfo.act = document.getElementById("glAcc").value;;
  // Reset dropdown
  var myApp = document.getElementById("glAcc");
  myApp.selectedIndex = 0;

function reset(){;;

  document.getElementById("current").textContent = "Click the Start Button";

function updateDropdown(){;

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

function findItem(){;

function changeItem(item){
  document.getElementById("current").textContent = item;
  //document.getElementById("options"). = "<option>1</option><option>2</option>";

function summary(){;

function findSummary(){;

function changeSummary(summary){
  document.getElementById("sumText").textContent = summary;


Basically to summarize, I want the dropdown options to update as the item displayed also updates. If it is not possible to update at the same time, I can add a button which will update the dropdown once clicked.

I do not want to share the whole code/spreadsheet to everyone, but if you want access please message me and I can share it to you.

Thank you.


Comment posted by Dario Zaccagnino

Perfect! This worked. I just needed to re-init the form and it started working as planed. Thank you!

Comment posted by Dario Zaccagnino

Thanks for the answer. This makes sense, and I am assuming that the getData() function is a function that I created in the file which returns an array of all the options/accounts that I want to put in the dropdown. Does it also have to return the elementID, or can I just remove the element ID parameter? Thank you

Comment posted by Cooper

It can return anything you want I wrote it that way because sometimes I want to use more than one drop-down and that way I can all in one function so you could change your return object to an object rather than as array and then just rewrite the update select function

Comment posted by Dario Zaccagnino

Ok. I just finished writing code and in the