How to Populate HTML Service Select Options from Range in Google Sheet?

问题

I am trying to populate my HTML Service drop down/select option list with all entries included in column A of my Vendor Database tab in the Google Sheet I am working with. It is currently showing up blank, though, when running. Any suggestions?

APPS SCRIPT:

 function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML += "";
  for (var i = 0; i < data.length;i+=1) {
   optionsHTML = '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
 }

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
   <body>
 <form>
 <div>
   <select>
       <option> != google.script.run.getVendors(); </option>
      </select>
</div>
</form>
  </body>
</html>

回答1:

When initializing optionsHTML that should be direct assignment, not +=. Instead, use the += in the for loop as you'll otherwise be replacing the contents of optionsHTML rather than appending to it.

function getVendors() {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Vendor Database");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow); 
  var data    = myRange.getValues();
  var optionsHTML = "";
  for (var i = 0; i < data.length; i+=1) {
    optionsHTML += '<option>' + data[i][0] + '</option>';
  };
  return optionsHTML;
}

Make sure you're correctly evaluating the HTML. Because of the way you've set this up, you need to treat your HTML file (I'm assuming it's called Index.html) as a template.

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
}

Finally, in the HTML file, looks like you're using incomplete anchors. Should be <?!= ... ?> and then call the function directly. (Also, remove the surrounding <option></option> tags as getVendors() already provides those.)

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form>
    <div>
      <select>
        <?!= getVendors(); ?>
      </select>
    </div>
  </form>
</body>
</html>

Once you have that working, and if it makes sense to put some more time and care into this, refactor to follow the best practices and load data asynchronously, not in templates by using a client-side script inside the HTML as mentioned by @Cooper.

回答2:

Here's something similar that I've done in the past.

Here's the Javascript in the html file:

$(function() {
        $('#txt1').val('');
        google.script.run
          .withSuccessHandler(updateSelect)
          .getSelectOptions();
      });

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

Here's the pertinent HTML:

<select id="sel1"  class="control" style="width:255px;height:35px;margin:10px 0 10px 0;">
      <option value="" selected></option>
   </select>

Here's the google script:

function getSelectOptions()
{
  sortOptions();
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Options');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var options=[];
  for(var i=0;i<vA.length;i++)
  {
    options.push(vA[i][0]);
  }
  return vA;
}

来源：https://stackoverflow.com/questions/49577433/how-to-populate-html-service-select-options-from-range-in-google-sheet

标签

google-apps-script