blocks|key|962310|text|这是我过去做过的类似的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|962311|以下是html文件中的Javascript：|962312|$(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%2B%2B)
++++++{
++++++++select.options[i]+=+new+Option(vA[i],vA[i]);
++++++}
++++}|code-block|syntax|javascript|962313|下面是相关的HTML：|962314|<select+id="sel1"++class="control"+style="width:255px;height:35px;margin:10px+0+10px+0;">
++++++<option+value=""+selected></option>
+++</select>|962315|下面是google脚本：|962316|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%2B%2B)
++{
++++options.push(vA[i][0]);
++}
++return+vA;
}|962317|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Here's something similar that I've done in the past.</p>

<p>Here's the Javascript in the html file:</p>

<pre><code>$(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&lt;vA.length;i++)
      {
        select.options[i] = new Option(vA[i],vA[i]);
      }
    }
</code></pre>

<p>Here's the pertinent HTML:</p>

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

<p>Here's the google script:</p>

<pre><code>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&lt;vA.length;i++)
  {
    options.push(vA[i][0]);
  }
  return vA;
}
</code></pre>


blocks|key|2228281|text|初始化optionsHTML时，应该是直接赋值，而不是%2B=。相反，在for循环中使用%2B=，否则您将替换optionsHTML的内容，而不是附加到它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2228282|function+getVendors()+{
++var+active+=+SpreadsheetApp.getActive();
++var+sheet+=+active.getSheetByName("Vendor+Database");
++var+lastRow+=+sheet.getLastRow();
++var+myRange+=+sheet.getRange("A2:A"+%2B+lastRow);+
++var+data++++=+myRange.getValues();
++var+optionsHTML+=+"";
++for+(var+i+=+0;+i+<+data.length;+i%2B=1)+{
++++optionsHTML+%2B=+'<option>'+%2B+data[i][0]+%2B+'</option>';
++};
++return+optionsHTML;
}|code-block|syntax|javascript|2228283|确保您正在正确地评估HTML。由于设置它的方式，您需要将您的HTML文件(我假设它称为Index.html)作为模板处理。|2228284|function+doGet()+{
++return+HtmlService.createTemplateFromFile('Index').evaluate()
}|2228285|最后，在HTML文件中，看起来您使用的是不完全锚点。应该是<?!=+...+?>，然后直接调用函数。(同时，删除周围的<option></option>标记，因为getVendors()已经提供了这些标记。)|2228286|<!DOCTYPE+html>
<html>
<head>
++<base+target="_top">
</head>
<body>
++<form>
++++<div>
++++++<select>
++++++++<?!=+getVendors();+?>
++++++</select>
++++</div>
++</form>
</body>
</html>|2228287|一旦你有了这样的工作，如果花更多的时间和精力在这上面有意义的话，那么就按照@Cooper提到的在HTML中使用客户端脚本来遵循最佳实践和异步加载数据，而不是在模板中加载数据。|2228288|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/apps-script/guides/html/best-practices#load_data_asynchronously_not_in_templates^0|3|B|R|2|16|2|1F|B|0|0|0|0|T|B|1N|H|29|C|0|0|1W|I|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|U|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

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

<pre><code>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 &lt; data.length; i+=1) {
    optionsHTML += '&lt;option&gt;' + data[i][0] + '&lt;/option&gt;';
  };
  return optionsHTML;
}
</code></pre>

<p>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.</p>

<pre><code>function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
}
</code></pre>

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

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

<p>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 <a href="https://developers.google.com/apps-script/guides/html/best-practices#load_data_asynchronously_not_in_templates" rel="nofollow noreferrer">load data asynchronously, not in templates</a> by using a client-side script inside the HTML as mentioned by @Cooper.</p>


<p>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?  </p>

<p>APPS SCRIPT:</p>

<pre><code> 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 &lt; data.length;i+=1) {
   optionsHTML = '&lt;option&gt;' + data[i][0] + '&lt;/option&gt;';
  };
  return optionsHTML;
 }
</code></pre>

<p>HTML:</p>

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


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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试填充我的HTML服务下拉/选择选项列表，其中包含在我正在使用的Google的供应商数据库选项卡A列中的所有条目。但是，在运行时，它目前显示为空白。有什么建议吗？应用程序脚本： function getVendors() {  var active = SpreadsheetApp.getActive();  ...

问如何在Google中填充HTML服务选择选项？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Google中填充HTML服务选择选项？EN