Google Web App：通过e.parameter为Materialize CSS下拉框传值问题

你遇到的核心问题有两个：一是后端doGet()里没法直接操作前端DOM（那些jQuery、getElementById写法全错，后端代码跑在Google服务器上，根本碰不到浏览器里的DOM）；二是Materialize的下拉组件不是原生select，需要JS初始化，直接给原生select赋值后还要通知Materialize更新。

下面是具体的解决步骤：

第一步：修正后端doGet代码，正确传递变量到HTML模板 #

先把后端的变量正确传递给HTML模板，这一步和你给文本框传值的逻辑一致：

function doGet(e) {
  var sport = e.parameter.sport;
  // 加载你的HTML模板文件
  var html = HtmlService.createTemplateFromFile('你的HTML文件名');
  html.sportValue = sport; // 把sport变量传递给模板
  return html.evaluate();
}

方法1：渲染HTML时直接设置选中状态 #

在HTML模板里，通过模板语法判断每个option的value是否等于后端传来的sportValue，匹配的话就加上selected属性：

<div class="row">
  <div class="input-field col s12">
    <select id="sports1">
      <!-- 没有有效传值时，保留默认提示选项的选中状态 -->
      <option value="null" disabled <?= (!sportValue || sportValue === 'null') ? 'selected' : '' ?>>Which Sport Do You Enjoy?</option>
      <option value="1" <?= sportValue === '1' ? 'selected' : '' ?>>Football</option>
      <option value="2" <?= sportValue === '2' ? 'selected' : '' ?>>Rugby</option>
      <option value="3" <?= sportValue === '3' ? 'selected' : '' ?>>Basketball</option>
    </select>
    <label class="white-text"><i>Love Sport?</i></label>
  </div>
</div>

<!-- 必须加载Materialize JS并初始化下拉组件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    M.FormSelect.init(elems);
  });
</script>

方法2：前端JS接收变量后设置选中值 #

如果不想在模板里写太多判断，可以在前端JS里获取后端变量，初始化下拉框后再设置选中状态并刷新组件：

<div class="row">
  <div class="input-field col s12">
    <select id="sports1">
      <option value="null" disabled selected>Which Sport Do You Enjoy?</option>
      <option value="1">Football</option>
      <option value="2">Rugby</option>
      <option value="3">Basketball</option>
    </select>
    <label class="white-text"><i>Love Sport?</i></label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // 从模板获取后端传递的变量
  var sportValue = <?= sportValue ?>;
  
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
    
    // 有有效传值时设置选中
    if (sportValue && sportValue !== 'null') {
      // 先给原生select赋值
      document.getElementById('sports1').value = sportValue;
      // 通知Materialize更新下拉组件
      instances[0].update();
    }
  });
</script>

关键注意点 #

• 后端doGet()里的html.sports1 = sport、$('#sports1').val(sport)这类写法完全无效：后端代码运行在服务器，前端DOM还没生成，这些是前端JS代码，只能写在HTML的<script>标签里。
• Materialize下拉组件必须初始化，不初始化的话连基础下拉功能都用不了，更别说赋值了。

内容的提问来源于stack exchange，提问作者David Howarth