在Google App Script中Materialize Select组件无法初始化的问题

问题根源 #

你的代码中初始化Select元素时使用了未定义的options变量，JavaScript执行到此处会抛出错误，导致Select元素无法完成Materialize的样式初始化。

修复方案 #

1. 修正初始化代码
   移除未声明的options参数（若无需额外配置），或明确定义配置对象：

   document.addEventListener('DOMContentLoaded', function() {
     var elems = document.querySelectorAll('select');
     // 无需配置时，直接调用init方法省略第二个参数
     var instances = M.FormSelect.init(elems);
     // 如需配置示例：
     // var instances = M.FormSelect.init(elems, {
     //   dropdownOptions: { alignment: 'left' }
     // });
   });
   

2. 规范布局结构（可选）
   Materialize栅格系统要求col元素必须包裹在row容器内，虽然这不是初始化失败的直接原因，但规范布局可避免潜在问题：

   <form class="main" id="form" novalidate="novalidate" style="max-width: 400px;margin: 40px auto;">
     <div class="row">
       <div class="input-field col s12">
         <select>
           <option value="" disabled selected>Choose your option</option>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
         </select>
         <label>Materialize Select</label>
       </div>
     </div>
   </form>
   

完整修复后的代码 #

<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <form class="main" id="form" novalidate="novalidate" style="max-width: 400px;margin: 40px auto;">
      <div class="row">
        <div class="input-field col s12">
          <select>
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
          <label>Materialize Select</label>
        </div>
      </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!--Initialize `select` elements-->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
      });
    </script>
  </body>
</html>

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