Javascript innerHTML搞乱html属性

Question

我正在尝试在物化模式中选择一个。到目前为止一切正常但是当我用ajax请求刷新模态选择的内容时，选择消失了。

经过调查，我发现innerHTML不是正确的HTML。

这是我有的：

let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML

控制台日志如下：

<div class="modal-content">
  <h4>Title</h4>
  <p>Some Text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled selected>Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

其次是

<div class="modal-content">
  <h4>Title</h4>
  <p>Some text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled="" selected="">Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

我们可以看到，disabled和selected被disabled=""和selected=""取代。

在替换innerHTMl之后，模态仍然打开，但是选择不可见。

当我使用Chrome开发工具检查模态（在更换ajax之后）时，我看到第一个输出（选择正确），但是没有显示。

这是由innerHTML引起的还是来自我的错误使用？

顺便说一下，我正在使用Chrome（63.0.3239.108）测试macOS High Sierra（10.13.2），它们都是最新的可用更新。该网站托管在一个docker容器中，但我不相信这个问题可能来自这里。

Answer 1

经过调查，我发现innerHTML不是正确的HTML。

这是正确的HTML。

见boolean attributes：

没有赋值的布尔属性（例如，检查）隐含地等同于具有分配给它的空字符串的布尔属性（即，checked =“”）。因此，它代表了真正的价值。

因此，这两组HTML表达相同的信息，并且都正确地执行。

将HTML转换为DOM，然后要求浏览器将DOM转换为HTML将为您提供规范化的HTML，而不是原始的HTML。所以改变是正常的。

---

当我使用Chrome开发工具检查模态（在更换ajax之后）时，我看到第一个输出（选择正确），但是没有显示。

问题中没有任何代码可以解释它没有被显示。这必须是由代码的其他部分引起的。

Answer 2

问题是由于在Materialise中实现了select。

我没有遇到任何问题，所以我没有正确阅读文档。编写的必须使用jQuery初始化select。

所以我补充道

$('select').material_select()

并重新初始化模态

$('.modal').material_select()

现在一切正常。