Materialize模态框Ajax更新select后消失，innerHTML属性异常排查

这个问题的核心不是innerHTML的属性格式变化，而是Materialize框架对Select组件的特殊处理逻辑导致的，下面给你拆解原因和解决办法：

为什么Select会"消失"？ #

Materialize的Select组件并不是直接使用原生<select>的样式，它会在页面加载时把原生select隐藏，然后生成一套自定义的UI元素（比如带下拉箭头的输入框样式）来模拟select的交互。

当你通过Ajax请求用innerHTML替换模态框内容后，新的<select>元素是动态插入DOM的，Materialize并没有自动对它进行初始化，所以这套自定义UI没有生成，原生select又被Materialize的CSS隐藏了，看起来就像是select"消失"了——这也是为什么你在开发者工具里能看到select的代码，但页面上看不到它的原因。

至于控制台里看到的disabled selected变成disabled="" selected=""，这是浏览器解析HTML时的正常行为：HTML5规范里布尔属性（比如disabled、selected）可以写成两种格式，只写属性名或者属性名加空字符串，这两种写法都是合法的，不会影响元素功能，只是表象而已。

解决办法 #

你只需要在替换完innerHTML之后，手动重新初始化模态框里的Select组件就行：

原生JS写法 #

// 替换innerHTML之后执行
let modalSelects = document.querySelectorAll('#modal select');
M.FormSelect.init(modalSelects);

jQuery写法（如果你用了jQuery） #

// 替换innerHTML之后执行
$('#modal select').formSelect();

额外优化建议 #

1. 尽量不要替换整个模态框的innerHTML，最好只替换包含select的容器（比如一个<div class="select-container">），这样可以减少不必要的DOM操作，也避免影响模态框里的其他已初始化组件。
2. 如果你的Ajax请求是异步的，确保在请求完成、DOM更新完成之后再执行初始化代码，比如把初始化逻辑放在Ajax的success回调里。

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