添加到 select 元素的动态选项无法正确呈现

Question

我已经阅读了SO提供的所有类似问题，但没有人解决我的问题。

我有以下 html:

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



<form action="" id="myForm">
   <div class="input-field col s12 l6">
       <select id="myselectid" name="myselectname">
       </select>
   </div>
   <div class="col s12 l6">
     <button id="" class="btn blue" type="submit"> submit</button>
   </div>
</form>

我需要用 JSON 文件的键“名称”的值填充 select 元素。

我的JSON

"resources": [
    {
      "name": "test.txt",
      "format": "txt",
      "size": 92502
    },
    {
      "name": "mini-test.txt",
      "format": "txt",
      "size": 64855
   }
]

myJS

<script>
 document.addEventListener('DOMContentLoaded', function() {
   $.getJSON(myJSON, function(data){
      var select = document.getElementById("myselectid");
      $.each(data.resources, function(i, field){
        select.add(new Option(field.name, field.name));
      });
    });
  });
  $(document).ready(function(){
     $('.sidenav').sidenav();
     $('select').formSelect();
  });
 </script>

我得到一个默认值为空的下拉菜单。通过单击箭头展开菜单，我只得到选项 "test.txt"。

奇怪的是 Firefox 检查器以灰色显示预期的 html

<select id="myselectid" name="myselectname" tabindex=-1>
  <option value="test.txt">test.txt</option>
  <option value="mini-test.txt">mini-test.txt</option>
</select>

这是怎么回事？

非常欢迎任何帮助..

提前致谢

编辑：该问题是由物化框架引起的。在向它添加选项之前，我正在初始化 select 元素。详情请查看我的回答。

Answer 1

感谢 Materialise Gitter 频道的 Sean Doherty，问题已得到解决。

出现问题是因为我在动态填充之前初始化了 M select 元素。

下面是正确的

myJS

<script>
 document.addEventListener('DOMContentLoaded', function() {
   $.getJSON(myJSON, function(data){
      var select = document.getElementById("myselectid");
      $.each(data.resources, function(i, field){
        select.add(new Option(field.name, field.name));
      });
      // init select element after collecting the option values
      M.FormSelect.init(document.querySelectorAll('select'));
    });
  });
  $(document).ready(function(){
     $('.sidenav').sidenav();
     // do not init select here because the dyn population is not done yet
     //$('select').formSelect();
  });
 </script>

添加到 select 元素的动态选项无法正确呈现

Dynamical options adding to select element not rendering correctly

javascript

jquery

json

materialize