Materialize框架下拉选择框无响应问题排查

我使用Materialize框架搭配Node后端与JavaScript前端开发表单，尝试提交表单时发现第二个字段（Area）呈现灰色、半显示状态且无响应。相关代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Form Example</span>
          <div class="input-field">
            <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" />
            <label for="zip">Zip Code</label>
          </div>

          <div class="input-field">
            <select id="area" name="area" class="validate">
              <option value="2000">2,000 sqft</option>
              <option value="3000">3,000 sqft</option>
            </select>
            <label for="area">Area</label>
          </div>
        </div>
        <div class="card-action">
          <a class="waves-effect waves-light btn" id="submitButton">Submit</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="hot-container" class="mt-4">
  <!-- Handsontable grid will be displayed here -->
</div>

问题根源在于Materialize的下拉选择框（select）组件必须通过JavaScript手动初始化，你仅引入了框架的CSS文件，未完成组件初始化步骤，导致select处于未激活状态，表现为灰色无响应。

修复步骤： #

1. 引入Materialize JavaScript文件：在页面底部添加JS文件引用（确保DOM加载完成前或后执行初始化）
2. 初始化select组件：通过DOM加载完成事件触发初始化方法

修改后的完整代码示例： #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Form Example</span>
          <div class="input-field">
            <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" />
            <label for="zip">Zip Code</label>
          </div>

          <div class="input-field">
            <select id="area" name="area" class="validate">
              <option value="2000">2,000 sqft</option>
              <option value="3000">3,000 sqft</option>
            </select>
            <label for="area">Area</label>
          </div>
        </div>
        <div class="card-action">
          <a class="waves-effect waves-light btn" id="submitButton">Submit</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="hot-container" class="mt-4">
  <!-- Handsontable grid will be displayed here -->
</div>

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

补充说明： #

• 若你的项目中使用了jQuery，也可以用以下代码初始化：

$(document).ready(function(){
  $('select').formSelect();
});

初始化后，Area下拉框即可正常显示并响应交互。

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