Materialize CSS动态创建Select：按钮与直接调用的差异问题

问题现象 #

• 页面加载时通过JS直接创建的Select组件样式正常、功能可用
• 按钮触发add()函数创建的Select组件样式丢失、几乎不可见
• 按钮创建的组件change事件仅能执行简单console.log，调用Materialize的getSelectedValues()等方法完全失效

问题原因 #

Materialize的Select组件不是原生HTML样式，是通过JS将原生select转换为自定义UI组件实现的。页面加载时仅对当时已存在的select执行了初始化：

var instances = M.FormSelect.init(elems, {});

但动态创建的新select未经过Materialize的初始化流程，导致：

1. 无法渲染框架自定义样式，呈现原生无样式状态
2. 无法绑定框架的组件事件与实例方法，调用框架专属方法会失效

解决方案 #

动态创建select并添加到DOM后，必须立即对其执行Materialize初始化操作，同时通过组件实例调用框架方法。修改后的代码如下：

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  // 初始化页面加载时已存在的select
  M.FormSelect.init(elems, {});
});

const container = document.getElementById("stringcontainer");
// 创建第一个select并初始化
var firstSelect = createSelect(1);
firstSelect.addEventListener('change', hello);
container.appendChild(firstSelect);
M.FormSelect.init(firstSelect, {});

function add(){
  // 用时间戳做ID避免重复
  var newSelect = createSelect(Date.now());
  newSelect.addEventListener('change', hello);
  container.appendChild(newSelect);
  // 关键步骤：动态创建后立即初始化新select
  M.FormSelect.init(newSelect, {});
}

function createSelect(num){
  var array = ["Option 1","Option 2","Option 3"];
  var selectList = document.createElement("select");
  selectList.id = "asp"+num;
  selectList.required = true;
  selectList.innerHTML += '<option disabled selected>Choose Option</option>';
  for (var i = 0; i < array.length; i++) {
      var option = document.createElement("option");
      option.value = array[i].split(" ").join("").toLowerCase();
      option.text = array[i]; 
      selectList.appendChild(option);
  }
  return selectList;
}

function hello(){
  console.log("Added EventListener");
  // 通过框架实例调用getSelectedValues()
  const instance = M.FormSelect.getInstance(this);
  console.log("选中值：", instance.getSelectedValues());
}

修改后的HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0/dist/css/materialize.min.css">

<div class="row">
    <div id="stringcontainer"></div>
</div><!-- CLOSE ROW -->

<div class="row">
  <div class="input-field col s3">
      <button id="astring" class="waves-effect waves-light btn-small" onclick="add()">Add</button>
  </div>
</div><!-- CLOSE ROW -->

<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0/dist/js/materialize.min.js"></script>

关键改动说明 #

1. 动态初始化：在add()函数中，新select添加到DOM后立即调用M.FormSelect.init()，确保框架应用样式并绑定功能
2. 实例调用方法：在hello()事件函数中，通过M.FormSelect.getInstance(this)获取组件实例，再调用getSelectedValues()
3. ID唯一性：改用时间戳作为动态select的ID，避免重复ID引发的潜在问题
4. HTML语法修正：将字符串中的实体符号</>替换为直接的</>，避免解析异常

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