如何在Materialize CSS中拥有多个下拉列表？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field">
  <select>
    <option value="" disabled selected>请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  <label>下拉列表</label>
</div>

<div class="input-field">
  <select>
    <option value="" disabled selected>请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  <label>下拉列表1</label>
</div>

<div class="input-field">
  <select>
    <option value="" disabled selected>请选择</option>
    <option value="option4">选项4</option>
    <option value="option5">选项5</option>
    <option value="option6">选项6</option>
  </select>
  <label>下拉列表2</label>
</div>

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});